remuneration/src/views/dataChart/privateChart/privateChartEditParamsData.vue

<template>
  <div>
    <m-form :items="formItems" v-model="formValues" label-width="80px">
      <template #dataView>
        <m-table
          card-title="数据预览"
          shadow="never"
          :items="items"
          :headers="headers"
        >
          <template #card-tools>
            <m-button size="mini" type="orange" @click="onPreview">预览</m-button>
          </template>
        </m-table>
      </template>
      <template #filterView>
        条件检索
      </template>
    </m-form>
    <m-dialog ref="dialog" title="数据预览" append-to-body>
      <m-table
        clearHeader
        shadow="never"
        :items="items"
        :headers="headers"
      ></m-table>
    </m-dialog>
  </div>
</template>

<script>
export default {
  name: 'privateChartEditParamsData',
  data () {
    return {
      formValues: {
        dataSource: null
      },
      formItems: [
        {
          label: '数据源',
          prop: 'dataSource',
          type: 'select',
          options: {
            filterable: true,
            items: [
              { label: '花名册', value: 'roster' },
              { label: '机构人员', value: 'organizationAndEmployee' },
              { label: '机构人员(带职务)', value: 'organizationAndEmployeeWithPost' },
              { label: '机构人员(带职务和绩效)', value: 'organizationAndEmployeeWithPostAndPerformance' }
            ]
          },
          handles: {
            change: this.onChange
          }
        },
        {
          label: '条件筛选',
          prop: 'filterView'
        },
        {
          label: '数据预览',
          prop: 'dataView'
        }
      ],
      items: [],
      headers: [
        {
          label: '字段名称',
          prop: 'fieldName'
        },
        {
          label: '字段类型',
          prop: 'fieldType'
        },
        {
          label: '字段描述',
          prop: 'fieldDesc'
        }
      ]
    }
  },
  methods: {
    onChange () {
      this.$emit('change', this.getValues())
    },
    getValues () {
      return [
        { organizationName: '遂溪支行', organizationNo: '123', postName: '经理', employeeName: '张三', employeeNo: '123', performance: 5000, integral: 600 },
        { organizationName: '赤坎支行', organizationNo: '123123', postName: '前台经理', employeeName: '李四', employeeNo: '123123', performance: 3500, integral: 956 },
        { organizationName: '霞山支行', organizationNo: '54612', postName: '柜员', employeeName: '王五', employeeNo: '123123', performance: 2000, integral: 456 },
        { organizationName: '麻章支行', organizationNo: '7478415', postName: '柜员', employeeName: '赵六', employeeNo: '6846', performance: 200, integral: 56 },
        { organizationName: '开发区支行', organizationNo: '54612', postName: '柜员', employeeName: '钱七', employeeNo: '123123', performance: 2000, integral: 456 }
      ]
    },
    onPreview () {
      this.$refs.dialog.open()
    }
  }
}
</script>

<style lang="scss" scoped>

</style>