lg_frontend/pages/manager/device.vue

<template>
  <div>
    <Curd
      :columns="columns"
      :api-conf="apiConf"
      :form-items="formItems"
    />
  </div>
</template>
<script>
import base from "~/templates/base";
import Curd from "../../components/smallCommon/Curd.vue";

export default {
  name: "role",
  extends: base,
  components: {
    Curd
  },
  data() {
    return {
      deviceTypes: [],
      columns: [
        {
          dataIndex: 'name',
          key: 'name',
          title: '名称'
        },
        {
          dataIndex: 'deviceMN',
          key: 'deviceMN',
          title: '编码'
        },
        {
          dataIndex: 'desricption',
          key: 'desricption',
          title: '描述'
        },
        {
          dataIndex: 'nickName',
          key: 'nickName',
          title: '别名'
        }
      ],
      apiConf: {
        listApi: {api: '/api/Device/Getpage', method: 'get'},
        deleteApi: {api: '/api/Device/Remove', method: 'delete', paramsType: 'Array'},
        editApi: {api: '/api/Device/update', method: 'put'},
        detailApi: {
          api: '/api/Device/FindOne',
          method: 'get',
          detailHandler({role, menus}) {

          }
        },
        addApi: {api: '/api/Device/Addd', method: 'post',}
      }
    }
  },


  computed: {
    formItems() {
      const self = this
      return [
        {
          type: 'input',
          key: 'deviceMN',
          label: 'MN编码',
          isSearch: true,
          placeholder: '请输入编码',
          rules: [
            {required: true, message: '请输入编码'}
          ]
        },

        {
          type: 'input',
          key: 'ip',
          label: 'IP地址'
        },
        {
          type: 'input',
          key: 'lng',
          label: '经度'
        },
        {
          type: 'input',
          key: 'lat',
          label: '纬度'
        },
        {
          type: 'input',
          key: 'nickName',
          label: '别名'
        },
        {
          type: 'select',
          key: 'deviceType',
          label: '设备类型',
          children: self.deviceTypes
        },
      ]
    }
  },
  created() {
    this.getMenus()
  },
  methods: {
    getMenus() {
      this.$get('/api/Device/GetDeviceTypes').then(({data}) => {
        this.deviceTypes = Object.keys(data).map(item => ({
          label: data[item],
          value: item
        }))
      })
    }
  }
}
</script>
<style scoped lang="less">

</style>