tft-fe/src/views/basicConfig/accountConfig.vue

<template>
  <div class="page-box">
    <search-bar
      :formConfigs="formConfig"
      ref="searchBarForm"
      @headBtnClick="buttonClick"
    />
    <base-table
      :page="listQuery.current"
      :limit="listQuery.size"
      :table-props="tableProps"
      :table-data="tableData"
      :max-height="tableH"
    >
      <method-btn
        v-if="tableBtn.length"
        slot="handleBtn"
        :width="80"
        label="操作"
        :method-list="tableBtn"
        @clickBtn="handleClick"
      />
    </base-table>
    <pagination
      :page.sync="listQuery.current"
      :limit.sync="listQuery.size"
      :total="total"
      @pagination="getList()"
    />
    <!-- 新增 -->
    <base-dialog
      :title="addOrEditTitle"
      :dialogVisible="centervisible"
      @cancel="handleCancel"
      @confirm="handleConfirm"
      :before-close="handleCancel"
    >
      <account-add ref="accountList" @successSubmit="successSubmit" />
    </base-dialog>
  </div>
</template>
<script>
import { tableHeight } from '@/utils/index'
import AccountAdd from './components/accountAdd.vue'
import statusTag from './components/statusTag.vue'
import { getAccountPage } from '@/api/basicConfig'
const tableProps = [
  {
    prop: 'account',
    label: '用户名'
  },
  {
    prop: 'name',
    label: '姓名'
  },
  {
    prop: 'role',
    label: '角色'
  },
  {
    prop: 'proLineName',
    label: '所属产线'
  },
  {
    prop: 'enabled',
    label: '状态',
    width: 120,
    subcomponent: statusTag
  }
]
const tableBtn = [
  {
    type: 'edit',
    btnName: '编辑'
  }
]
export default {
  name: 'AccountConfig',
  components: { AccountAdd },
  data() {
    return {
      formConfig: [
        {
          type: 'select',
          label: '产线',
          selectOptions: JSON.parse(localStorage.getItem('publicList'))
            .proLineVoList,
          param: 'proLineId',
          defaultSelect: '',
          width: 120
        },
        {
          type: 'select',
          label: '角色',
          selectOptions: JSON.parse(localStorage.getItem('publicList'))
            .roleVoList,
          labelField: 'dataName',
          valueField: 'dataName',
          param: 'role',
          defaultSelect: '',
          width: 150
        },
        {
          type: 'input',
          label: '用户名',
          placeholder: '用户名',
          param: 'account'
        },
        {
          type: 'input',
          label: '姓名',
          placeholder: '姓名',
          param: 'name',
          width: 150
        },
        {
          type: 'select',
          label: '状态',
          selectOptions: JSON.parse(localStorage.getItem('publicList'))
            .enabledVoList,
          labelField: 'dataName',
          valueField: 'dataCode',
          param: 'enabled',
          defaultSelect: '',
          width: 120
        },
        {
          type: 'button',
          btnName: '查询',
          name: 'search',
          color: 'primary'
        },
        {
          type: 'button',
          btnName: '重置',
          name: 'reset'
        },
        {
          type: 'button',
          btnName: '新增',
          name: 'add',
          color: 'primary',
          plain: true
        }
      ],
      tableProps,
      tableData: [],
      tableBtn,
      tableH: tableHeight(265),
      total: 0,
      listQuery: {
        current: 1,
        size: 20
      },
      centervisible: false,
      addOrEditTitle: '' //新增编辑弹出框的title
    }
  },
  mounted() {
    window.addEventListener('resize', () => {
      this.tableH = tableHeight(265)
    })
    this.getList()
  },
  methods: {
    getList() {
      getAccountPage({ ...this.listQuery }).then((res) => {
        if (res.code === 0) {
          this.total = res.data.total
          this.tableData = res.data.records
        }
      })
    },
    handleClick(val) {
      this.addOrEditTitle = '编辑'
      this.$nextTick(() => {
        this.$refs.accountList.init(val.data.id)
      })
      this.centervisible = true
    },
    buttonClick(val) {
      switch (val.btnName) {
        case 'search':
          this.listQuery.proLineId = val.proLineId
          this.listQuery.role = val.role
          this.listQuery.account = val.account
          this.listQuery.name = val.name
          this.listQuery.enabled = val.enabled
          this.listQuery.current = 1
          this.getList()
          break
        case 'reset':
          this.$refs.searchBarForm.resetForm()
          this.listQuery.proLineId = ''
          this.listQuery.role = ''
          this.listQuery.account = ''
          this.listQuery.name = ''
          this.listQuery.enabled = null
          this.listQuery.current = 1
          this.getList()
          break
        default:
          this.addOrEditTitle = '新增'
          this.centervisible = true
          this.$nextTick(() => {
            this.$refs.accountList.init()
          })
      }
    },
    handleCancel() {
      this.$refs.accountList.formClear()
      this.centervisible = false
      this.addOrEditTitle = ''
    },
    handleConfirm() {
      this.$refs.accountList.submitForm()
    },
    successSubmit() {
      this.handleCancel()
      this.getList()
    }
  }
}
</script>