jsm-mall-front/src/views/workOrder/appraise/index.vue

<template>
  <template-page
    ref="pageRef"
    :get-list="getList"
    :table-attributes="tableAttributes"
    :table-events="tableEvents"
    :options-evens-group="optionsEvensGroup"
    :moreParameters="moreParameters"
    :column-parsing="columnParsing"
    :exportList="exportList"
  >
  </template-page>
</template>

<script>
import TemplatePage from '@/components/template/template-page-1.vue'
import import_mixin from '@/components/template/import_mixin.js'
import ImageUpload from '@/components/file-upload'
import { required, mobileRequired, mobile, httpUrl, email } from '@/components/template/rules_verify.js'
import { listPageV2, pageExport } from '@/api/workOrder/appraise'
export default {
  components: { TemplatePage, ImageUpload },
  mixins: [import_mixin],
  data() {
    return {
      // 事件组合
      optionsEvensGroup: [],
      // 表格属性
      tableAttributes: {
        // 启用勾选列
        selectColumn: false
      },
      // 表格事件
      tableEvents: {
        'selection-change': this.selectionChange
      },
      // 勾选选中行
      recordSelected: [],
      /** 表单变量 */
      formDialogType: 0,
      formDialogTitles: ['新增', '编辑', '详情'],
      formDialog: false,
      appraise_status: ''
    }
  },
  computed: {
    // 更多参数
    moreParameters() {
      return []
    },
    formItems() {
      return []
    }
  },
  created() {
    if (this.$route.query.type == 1) {
      this.appraise_status = 'C'
      this.$nextTick(() => {
        this.appraise_status = ''
        this.$router.push({ name: 'appraise', params: {}, query: {} })
      })
    }
  },
  methods: {
    // 列表请求函数
    getList(p, cb) {
      try {
        var pam = JSON.parse(JSON.stringify(p))
        pam.params.push({ param: 'a.appraise_status', compare: '=', value: this.appraise_status })
        cb && cb(pam)
        return listPageV2(pam)
      } catch (error) {
        console.log(error)
      }
    },
    // 列表导出函数
    exportList: pageExport,
    // 表格列解析渲染数据更改
    columnParsing(item, defaultData) {
      if (item.jname === 'id') {
        defaultData.render = (h, { row, index, column }) => {
          return (
            <div style="padding:0 6px;cursor: pointer;" class={{ 'text-view': true, 'text-view-copy': column.isCopy }}>
              <span
                style="color:#008dd4;"
                onClick={() => {
                  this.$router.push({
                    name: window.isWorkOrderPoolPath,
                    params: {
                      pageName: row.id,
                      pageType: 'detail',
                      pageCode: row.id,
                      pagePam: 'Evaluation'
                    }
                  })
                }}
              >
                {row.id}
              </span>
              {column.isCopy ? (
                <i
                  style="color:#008dd4;"
                  class={['el-icon-document-copy', column.columnCopyClass]}
                  data-clipboard-text={row[column.columnAttributes.prop]}
                ></i>
              ) : null}
            </div>
          )
        }
        defaultData.columnAttributes.width = 200
      }
      if (item.jname === 'appraiseImgUrl') {
        defaultData.render = (h, { row, index, column }) => {
          return (
            <div style="cursor: pointer;display: flex;justify-content: center;">
              {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;cursor: pointer;"
                      />
                    ))
                : null}
            </div>
          )
        }
        defaultData.columnAttributes.width = 200
      }
      if (item.jname === 'appraiseContent') {
        defaultData.render = (h, { row, index, column }) => {
          return <span>{row.appraiseContent}</span>
        }
        defaultData.columnAttributes.width = 200
      }
      return defaultData
    },
    // 监听勾选变化
    selectionChange(data) {
      this.recordSelected = data
    }
  }
}
</script>

<style lang="scss" scoped>
.tab {
  padding: 20px 20px 0 20px;
}
</style>