costDetailModal.vue 2.09 KB
<template>
  <a-modal
    title="费用详细"
    :width="800"
    :centered="true"
    :visible="visible"
    @cancel="handleCancel"
    :footer="null"
    :maskClosable="false"
    style="top: 20px"
    class="scope-attachment"
  >
    <a-table
      ref="table"
      size="middle"
      bordered
      :columns="columns"
      :rowKey="(record) => record.id"
      :dataSource="dataList"
      :pagination="false"
      :loading="loading"
    >
      <!-- 字符串超长截取省略号显示-->
      <span slot="esContent" slot-scope="text">
        <j-ellipsis :value="text" :length="10" />
      </span>
    </a-table>
  </a-modal>
</template>

<script>
export default {
  name: 'coseDetailModal',
  data() {
    return {
      dataList: [],
      loading: false,
      visible: false,
      dbTimePoint: JSON.parse(sessionStorage.getItem('DB_TIME_POINT')), // 收费模式
      columns: [
        {
          title: '序号',
          dataIndex: '',
          key: 'rowIndex',
          width: 60,
          align: 'center',
          customRender: function (t, r, index) {
            return parseInt(index) + 1
          },
        },
        {
          title: '费用名称',
          align: 'center',
          dataIndex: 'chargeName',
        },
        {
          title: '费用金额(元)',
          align: 'center',
          dataIndex: 'chargeMoney',
          customRender: (t, r, index) => {
            return this.$numMoney(t)
          },
        },
        {
          title: '收费模式',
          align: 'center',
          dataIndex: 'timePoint',
          customRender: (t, r, index) => {
            for (var i = 0; i < this.dbTimePoint.length; i++) {
              if (t === Number(this.dbTimePoint[i].name)) {
                return this.dbTimePoint[i].title
              }
            }
          },
        },
      ],
    }
  },
  created() {},
  methods: {
    edit(record) {
      this.dataList = record
      this.visible = true
    },
    handleCancel() {
      this.close()
    },
    close() {
      this.$emit('close')
      this.visible = false
    },
  },
}
</script>
<style>
</style>