haowanShow/admin/src/views/industry/list.vue

<template>
  <div class="industry-list">
    <tables
      :buttonList="buttonList"
      :data-api="getIndustry"
      :delete-api="updateIndustry"
      :columns="columns"
      @create="create"
      @toEdit="toEdit"
      placeholder="输入行业名称"
      ref="table"
    />
    <cModal :show="modalShow" :width="526" title="新增行业" @close="modalShow=false" @submit="createIndustry">
      <div class="form">
        <Form :label-width="86">
          <FormItem label="行业名称">
            <Input size="large" v-model="form.name" />
          </FormItem>
        </Form>
      </div>
    </cModal>
  </div>
</template>

<script>
import { getIndustry, createIndustry, updateIndustry } from '@/api/company'
import tables from 'components/tables'
import cModal from 'components/Modal'

export default {
  data () {
    return {
      getIndustry,
      // 传递给tables的表格列数据
      buttonList: [
        {
          text: '新增',
          handle: 'create'
        }
      ],
      dataApi: getIndustry,
      deleteApi: getIndustry,
      columns: [
        {
          type: 'index',
          title: '序号',
          align: 'center',
          width: 80
        },
        {
          title: '行业名称',
          key: 'name',
          align: 'center'
        },
        {
          title: '状态',
          key: 'isValide',
          align: 'center',
          render: (h, params) => {
            return h('i-switch', {
              props: {
                trueValue: 1,
                falseValue: 0,
                value: params.row.isValide,
                // disabled: params.row.roleKey === 'admin'
              },
              on: {
                'on-change': (val) => {
                  updateIndustry(Object.assign(params.row, {isValide: val}))
                }
              }
            })
          }
        },
        {
          title: '创建时间',
          key: 'createTime',
          align: 'center',
          render: (h, params) => h('p', params.row.createTime.replace('T', ' '))
        },
        {
          title: '操作',
          slot: 'action',
          tools: ['edit', 'del' ],
          align: 'center'
        }
      ],
      modalShow: false,
      form: {
        name: ''
      }
    }
  },
  components: {
    tables,
    cModal
  },
  methods: {
    create () {
      this.form = {
        name: ''
      }
      this.modalShow = true
    },
    toEdit (item) {
      this.modalShow = true
      this.form = Object.assign({}, item)
    },
    async createIndustry () {
      let api = this.form.id ? updateIndustry : createIndustry
      let res = await api(this.form)
      this.$refs['table'].handleTableData()
      this.modalShow = false
    },
    async updateIndustry(row) {
      row[0].enable = 0
      await updateIndustry(row[0])
      this.$Message.success({
        content: '删除成功'
      })
    }
  }
}
</script>

<style lang="less" scoped>
.industry-list {
  padding: 30px;
}
</style>