zfire-newmall-admin/src/views/valueAddedService/extendedWarrantyWork/index.vue

<template>
  <template-page ref="pageRef" :getList="getList" :operation="operation" :exportList="exportList"
    :columnParsing="columnParsing" :tableAttributes="tableAttributes" :tableEvents="tableEvents"
    :screeningAnalysis="screeningAnalysis" :filterMethod="filterMethod" :replaceOrNotMap="true">
  </template-page>
</template>

<script>
import TemplatePage from '@/components/template/template-page-1.vue'
import import_mixin from '@/components/template/import_mixin.js'
import { orderBaseList, orderBaseListExport } from "@/api/workOrderPool.js"
import ywgdjs from "@/assets/ywgdjs.png"
import yjs from "@/assets/yjs.png"
export default {
  components: {
    TemplatePage,
  },
  mixins: [import_mixin],
  data() {
    return {
      // 表格属性
      tableAttributes: {
        // 启用勾选列
        selectColumn: false,
      },
      // 表格事件
      tableEvents: {
        'selection-change': this.selectionChange
      },
    }
  },
  methods: {
    screeningAnalysis(jname, val) {
      if (jname == 'orderFlags') {
        return (val || []).map(item => item.tagName).join(',')
      } else {
        return val
      }
    },
    filterMethod(value, row, column) {
      if (column['property'] == 'orderFlags') {
        return (row[column['property']] || []).map(item => item.tagName).join(',') === value
      }
      return row[column['property']] === value
    },

    // 列表请求函数
    getList(p, cb) {
      var pam = JSON.parse(JSON.stringify(p))
      try {
        pam.params.push(
          { "param": "a.order_status", "compare": "=", "value": "YWG" },
          { "param": "a.order_status", "compare": "=", "value": "YJS" }
        )
        pam.isYb = true
        cb && cb(pam)
        return orderBaseList(pam)
      } catch (err) {
      }
    },

    // 列表导出函数
    exportList: orderBaseListExport,

    // 表格列解析渲染数据更改
    columnParsing(item, defaultData) {
      if (item.jname === 'orderFlags') {
        defaultData.render = (h, { row, index, column }) => {
          return (
            <div style="padding:0 6px;display:flex;align-items:center;">
              {(row[column.columnAttributes.prop] || []).map(item => {
                if (item.tagName == "已完工") {
                  return (
                    <img src={ywgdjs} style="width:22px;height:22px;" />
                  )
                } else if (item.tagName == "已结算") {
                  return (
                    <img src={yjs} style="width:22px;height:22px;" />
                  )
                } else {
                  return (
                    <div style="display: inline-block;border:1px solid #409EFF; color:#409EFF;padding:0 2px;border-radius: 4px;margin:2px 2px 0 0;">
                      {item.tagName}
                    </div>
                  )
                }
              })}
            </div>
          )
        }
      }
      if (item.jname === 'appointmentTime') {
        defaultData.render = (h, { row, index, column }) => {
          return (
            <div style="padding:0 6px;cursor: pointer;">
              {row[column.columnAttributes.prop] ? row[column.columnAttributes.prop].split(" ")[0] : ""}
            </div>
          )
        }
      }
      return defaultData
    },

    // 监听勾选变化
    selectionChange(data) {
      this.recordSelected = data
    },

    operation(h, { row, index, column }) {
      return (
        <div class='operation-btns'>
          <el-button type="text" onClick={() => {
            this.$router.push({
              name: "workOrderPool",
              query: {
                id: row.id,
              }
            })
          }}>详情</el-button>
        </div>
      )
    },
  }
}
</script>

<style lang="scss" scoped></style>