dzhh-frontend/.svn/pristine/54/5421cb70fbc0bfe0ab0679a436f2a2eaa16f103c.svn-base

<template>
  <div>
        <div class="table-operator">
          <a-button type="primary" icon="plus" @click="handleAddGraphRepoart">新增</a-button>
          <a-popconfirm v-if="selectedRowKeys.length" :title="'确定要删除这'+selectedRowKeys.length+'项吗?'" @confirm="() => handleRemoveGraphRepoart()">
            <a-button icon="minus" >删除</a-button>
          </a-popconfirm>
        </div>
        <a-table
          size="middle"
          bordered
          :rowKey="(record, index) => index"
          :columns="columns"
          :data-source="tableData_"
          :pagination="false"
          :row-selection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
          :scroll="getScroll"
        >
          <template v-for="(col,i) in scopedSlots" :slot="col.name" slot-scope="text, record">
              <div v-if="col.type === 'text'" :key="i" >
                <a-input
                  :key="i"
                  style="margin: -5px 0"
                  v-model="record[col.name]"
                />
              </div>
              <div v-else-if="col.type === 'number'" :key="i" >
                <a-input
                  :key="i"
                  type="number"
                  style="margin: -5px 0"
                  v-model="record[col.name]"
                />
              </div>
              <div v-else-if="col.type === 'select'" :key="i" >
                <j-dict-select-tag
                  :key="i"
                  style="margin: -5px 0"
                  :dict-code="col.dictCode"
                  v-model="record[col.name]"
                >
                </j-dict-select-tag>
              </div>
              <div v-else-if="col.type === 'check'" :key="i" >
                <a-checkbox style="margin: -5px 0" :key="i" :checked="record[col.name]?true:false" @change="checkboxChange(record,col.name)"></a-checkbox>
              </div>
              <div v-else-if="col.type === 'JInputPop'" :key="i" >
                <j-input-pop style="margin: -5px 0" :key="i" v-model="record[col.name]"></j-input-pop>
              </div>
              <div v-else-if="col.type === 'JCodeEditorPop'" :key="i" >
                <j-code-editor-pop :key="i" v-model="record[col.name]"></j-code-editor-pop>
              </div>
          </template>
        </a-table>
  </div>
</template>

<script>
import JInputPop from '@/components/jeecg/minipop/JInputPop'
import JCodeEditorPop from '@/components/jeecg/minipop/JCodeEditorPop'
export default {
  name: 'ConfigTable',
  components: {
    JInputPop,
    JCodeEditorPop
  },
  props: {
    tableData: {
      type: Array,
      default: []
    },
    extendData: {
      type: Object,
      default: {}
    }
  },
  data() {
    return {
      selectedRowKeys: [],
      columns: [
        {
          title: '#',
          dataIndex: '',
          key: 'rowIndex',
          width: 60,
          align: 'center',
          customRender: function(t, r, index) {
            return parseInt(index) + 1
          }
        },
        {
          title: '字段名',
          align: 'center',
          dataIndex: 'fieldName',
          width: 120,
          scopedSlots: { customRender: 'fieldName' }
        },
        {
          title: '字段文本',
          align: 'center',
          dataIndex: 'fieldTxt',
          width: 120,
          scopedSlots: { customRender: 'fieldTxt' }
        },
        {
          title: '排序',
          align: 'center',
          dataIndex: 'orderNum',
          width: 80,
          scopedSlots: { customRender: 'orderNum' }
        },
        {
          title: '字段类型',
          align: 'center',
          dataIndex: 'fieldType',
          width: 120,
          scopedSlots: { customRender: 'fieldType' }
        },
        {
          title: '控件宽度',
          align: 'center',
          dataIndex: 'fieldWidth',
          width: 80,
          scopedSlots: { customRender: 'fieldWidth' }
        },
        {
          title: '是否显示',
          align: 'center',
          dataIndex: 'isShow',
          width: 80,
          scopedSlots: { customRender: 'isShow' }
        },
        {
          title: '计算总计',
          align: 'center',
          dataIndex: 'isTotal',
          width: 80,
          scopedSlots: { customRender: 'isTotal' }
        },
        {
          title: '是否查询',
          align: 'center',
          dataIndex: 'searchFlag',
          width: 80,
          scopedSlots: { customRender: 'searchFlag' }
        },
        {
          title: '查询模式',
          align: 'center',
          dataIndex: 'searchMode',
          width: 150,
          scopedSlots: { customRender: 'searchMode' }
        },
        {
          title: '字典CODE',
          align: 'center',
          dataIndex: 'dictCode',
          width: 120,
          scopedSlots: { customRender: 'dictCode' }
        },
        {
          title: '表达式',
          align: 'center',
          dataIndex: 'func',
          width: 120,
          scopedSlots: { customRender: 'func' }
        },
        {
          title: '表达式参数',
          align: 'center',
          dataIndex: 'funcParam',
          width: 120,
          scopedSlots: { customRender: 'funcParam' }
        },
        {
          title: '聚合类型',
          align: 'center',
          dataIndex: 'aggregateType',
          width: 120,
          scopedSlots: { customRender: 'aggregateType' }
        },
        {
          title: 'JS增强',
          align: 'center',
          dataIndex: 'jsEnhance',
          width: 120,
          scopedSlots: { customRender: 'jsEnhance' }
        }
      ],
      scopedSlots: [
        { type: 'text', name: 'fieldName' },
        { type: 'text', name: 'fieldTxt' },
        { type: 'text', name: 'dictCode' },
        { type: 'number', name: 'orderNum' },
        { type: 'select', name: 'fieldType', dictCode: 'field_type' },
        { type: 'select', name: 'searchMode', dictCode: 'search_mode' },
        { type: 'check', name: 'isShow' },
        { type: 'check', name: 'isTotal' },
        { type: 'check', name: 'searchFlag' },
        { type: 'JInputPop', name: 'func' },
        { type: 'JInputPop', name: 'funcParam' },
        { type: 'select', name: 'aggregateType', dictCode: 'aggregate_type' },
        { type: 'JCodeEditorPop', name: 'jsEnhance' },
        { type: 'number', name: 'fieldWidth' }
      ],
      newTableData: {
        'id': '',
        'fieldName': '',
        'fieldTxt': '',
        'isShow': 1,
        'isTotal': 0,
        'searchFlag': 0,
        'searchMode': null,
        'dictCode': '',
        'fieldHref': null,
        'fieldType': 'String',
        'orderNum': 1,
        'replaceVal': null,
        'createBy': '',
        'createTime': '',
        'updateBy': null,
        'updateTime': null,
        'func': null,
        'funcParam': null,
        'aggregateType': null
      },
      tableData_: JSON.parse(JSON.stringify(this.tableData))
    }
  },
  computed: {
    getScroll() {
      if (this.tableData_.length >= 5) {
        return { y: 200, x: 1600 }
      } else {
        return { x: 1600 }
      }
    }
  },
  methods: {
    handleAddGraphRepoart(addData) { // 新增
      let newData = JSON.parse(JSON.stringify(this.newTableData))
      if (addData) {
        newData = Object.assign(newData, this.extendData, addData)
      } else {
        newData = Object.assign(newData, this.extendData)
      }
      const length_ = this.tableData_.length
      if (length_ !== 0) {
        newData.orderNum = this.tableData_[length_ - 1]['orderNum'] + 1
      }
      this.tableData_.push(newData)
      // this.$emit('add', newData)
    },
    clearTableData() {
      this.tableData_ = []
    },
    onSelectChange(selectedRowKeys) {
      this.selectedRowKeys = selectedRowKeys
    },
    checkboxChange(data, name) {
      if (data[name]) {
        data[name] = 0
      } else {
        data[name] = 1
      }
    },
    handleRemoveGraphRepoart() { // 删除
      var that = this
      this.selectedRowKeys.sort(function(a, b) { return b - a })
      this.selectedRowKeys.forEach(function(index) {
        that.tableData_.splice(index, 1)
      })
      // this.$emit('del', this.selectedRowKeys)
      this.selectedRowKeys = []
    },
    getTableData() {
      return JSON.parse(JSON.stringify(this.tableData_))
    }
  }
}
</script>