Отображение поиска / реляционных данных в таблице v-data с помощью Vue и SQLServer

Отображение поиска / реляционных данных в таблице v-data с помощью Vue и SQLServer

17.10.2019 01:04:16 Просмотров 67 Источник

Я создал приложение узла с Vue.js, Vuetify (клиентская сторона приложения) и Express (серверная сторона приложения), а данные хранятся в базе данных SQL Server (реляционная база данных).

Все работает и работает на моей машине разработки, и соединение между клиентом, сервером и базой данных работает.

Я просто не знаю, как отобразить "данные поиска/реляционные данные" в таблицах, которые я использую.

3 таблицы в моей базе:

Relational tables

Поэтому я хотел бы отобразить поля имени AssetMake и AssetModel вместо FKAssetMake и FKAssetModel.

Это скриншот моей таблицы в браузере:

Table display

Как вы можете видеть, значения FK отображаются, но не имена.

Таблицы подстановки и данные для отображения:

Lookup table data

Объект данных в Chrome:

enter image description here

Мой шаблон вю :

<template>
  <div id="app">
    <v-app id="inspire">
      <v-card>
        <v-card-title>
          Asset (Vehicle/Vessel)
          <v-spacer></v-spacer>
          <v-text-field
            v-model="search"
            label="Search"
            append-icon="mdi-card-search-outline"
            single-line
            hide-details
          ></v-text-field>
        </v-card-title>

        <v-data-table dense
        :headers="headers"
        :items="assets"
        :search="search"
        sort-by="Name"
        class="elevation-1"
      >
        <template v-slot:top>
          <v-toolbar flat color="white">
            <v-toolbar-title>{{ tabelHeader }}</v-toolbar-title>

            <v-spacer></v-spacer>
            <v-dialog v-model="dialog" max-width="500px">
              <template v-slot:activator="{ on }">
                <v-btn color="primary" dark class="mb-2" v-on="on">New Item</v-btn>
              </template>
              <v-card>
                <v-card-title>
                  <span class="headline">{{ formTitle }}</span>
                </v-card-title>

                <v-card-text>
                  <v-container>
                    <v-row>
                      <v-col cols="12" sm="6" md="4">
                        <v-text-field v-model="editedItem.Name" label="Name"></v-text-field>
                      </v-col>
                      <v-col cols="12" sm="6" md="4">
                        <v-text-field v-model="editedItem.FKMake" label="Make"></v-text-field>
                      </v-col>
                      <v-col cols="12" sm="6" md="4">
                        <v-text-field v-model="editedItem.FKModel" label="Model"></v-text-field>
                      </v-col>
                      <v-col cols="12" sm="6" md="4">
                        <v-text-field v-model="editedItem.Registration" label="Registration"></v-text-field>
                      </v-col>
                      <v-col cols="12" sm="6" md="4">
                        <v-text-field v-model="editedItem.Description" label="Description"></v-text-field>
                      </v-col>
                      <v-col cols="12" sm="6" md="4">
                        <v-text-field v-model="editedItem.Year" label="Year"></v-text-field>
                      </v-col>
                      <v-col cols="12" sm="6" md="4">
                        <v-text-field v-model="editedItem.Capacity" label="Capacity"></v-text-field>
                      </v-col>
                      <v-col cols="12" sm="6" md="4">
                        <v-text-field v-model="editedItem.isVessel" label="Is Vessel"></v-text-field>
                      </v-col>
                    </v-row>
                  </v-container>
                </v-card-text>

                <v-card-actions>
                  <v-spacer></v-spacer>
                  <v-btn color="blue darken-1" text @click="close">Cancel</v-btn>
                  <v-btn color="blue darken-1" text @click="save">Save</v-btn>
                </v-card-actions>
              </v-card>
            </v-dialog>
          </v-toolbar>
        </template>
        <template v-slot:item.Action="{ item }">
          <v-icon
            small
            class="mr-2"
            @click="editItem(item)"
          >
            edit
          </v-icon>
          <v-icon
            small
            @click="deleteItem(item)"
          >
            delete
          </v-icon>
        </template>
      </v-data-table>
      </v-card>
    </v-app>
  </div>
</template>

Часть сценария :

<script>

import appConfig from '../config/appConfig.js'

const baseURL = "http://" + appConfig.server.ip + ":" + appConfig.server.port

export default {
  data: () => ({
    search: '',
    dialog: false,
    tabelHeader: '',
    assets: [],
    headers: [
      { text: 'Name', value: 'Name'},
      { text: 'Make', value: 'FKMake'},
      { text: 'Model', value: 'FKModel'},
      { text: 'Registration', value: 'Registration'},
      { text: 'Description', value: 'Description' },
      { text: 'Year', value: 'Year' },
      { text: 'Capacity', value: 'Capacity' },
      { text: 'Vessel', value: 'IsVessel' },
      { text: 'Actions', value: 'Action', sortable: false }
      ],

    editedIndex: -1,
    editedItem: {
      Name: '',
      FKMake: -1,
      FKModel: -1,
      Registration: null,
      Year: null,
      Capacity: null,
      Description: '',
      IsVessel: null
    },
    defaultItem: {
      Name: '',
      FKMake: -1,
      FKModel: -1,
      Registration: null,
      Year: null,
      Capacity: null,
      Description: '',
      IsVessel: null
    }
  }),

  watch: {
    dialog (val) {
      val || this.close()
    },
  },

  methods:{
    editItem (item) {
      this.editedIndex = this.assets.indexOf(item)
      this.editedItem = Object.assign({}, item)
      this.dialog = true
    },

    deleteItem (item) {
      const index = this.assets.indexOf(item)
      var isDelete = confirm('Are you sure you want to delete this item?')

      if (isDelete) {
        this.deleteAssetMake(item, index)
      }
    },

    close () {
      this.dialog = false
      setTimeout(() => {
        this.editedItem = Object.assign({}, this.defaultItem)
        this.editedIndex = -1
      }, 300)
    },

    save () {
      if (this.editedIndex > -1) {
        Object.assign(this.assets[this.editedIndex], this.editedItem)
        this.updateAssetMake(this.editedItem)
      } 
      else {
        this.assets.push(this.editedItem)
        this.addAssetMake(this.editedItem)
      }
      this.close()
    },



    deleteAssetMake (asset, index) {
      fetch(baseURL + '/api/asset/' + asset.ID, {
        method: 'DELETE'
        })
        .then(() => {
          this.assets.splice(index, 1)
          })
          },

    updateAssetMake (asset) {
      fetch(baseURL + '/api/asset/' + asset.ID, {
        body: JSON.stringify(asset),
        method: 'PUT',
        headers: {
        'Content-Type': 'application/json'
        }
      })
      .then(() => {

      })
    },

    addAssetMake (asset) {
      fetch(baseURL + '/api/asset/', {
        body: JSON.stringify(asset),
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        }
      })
    }
  },

  mounted () {
        fetch(baseURL + '/api/asset')
            .then(response => response.json())
            .then((data) => {
                this.assets = data.resultMessage
                console.log(data.resultMessage)
            })

            //.catch(() => console.log('Can’t access  response. Blocked by browser?'))
    },

    computed: {
    formTitle () {
      return this.editedIndex === -1 ? 'New Item' : 'Edit Item'
    },
  }
}
</script>
  1. Как отобразить поле имени ссылочной таблицы вместо внешнего ключа.

  2. Есть ли "лучший" способ выполнить задачу с дизайном базы данных "веб-типа"?

У вопроса есть решение - Посмотреть?

https://stackoverflow.com/questions/58429988/display-lookup-relational-data-in-a-v-data-table-with-vue-and-sqlserver#comment103201458_58429988
У вас есть данные из AssetMake/AssetModel в JSON-объект? Похоже, что у вас этого нет, согласно вашему скриншоту
https://stackoverflow.com/questions/58429988/display-lookup-relational-data-in-a-v-data-table-with-vue-and-sqlserver#comment103203226_58429988
Вам нужно реорганизовать ваш sql-запрос, чтобы включить оба значения столбца как assetMake & assetModel
https://stackoverflow.com/questions/58429988/display-lookup-relational-data-in-a-v-data-table-with-vue-and-sqlserver#comment103214746_58429988
@isebarn я не выбираю данные AssetMake/AssetModel в запросе. Если я включу данные, как я могу настроить отношения в коде?
https://stackoverflow.com/questions/58429988/display-lookup-relational-data-in-a-v-data-table-with-vue-and-sqlserver#comment103214796_58429988
@chans я могу сделать это, чтобы отобразить текст, но когда он дойдет до редактирования или добавления, как я дам пользователю параметры (поиск)?
https://stackoverflow.com/questions/58429988/display-lookup-relational-data-in-a-v-data-table-with-vue-and-sqlserver#comment103214948_58429988
@LouwrensPotgieter проверьте ответ ниже, я перечислил вниз изменения должны быть сделаны в html и css. Дайте мне знать, если это решит вашу проблему
https://stackoverflow.com/questions/58429988/display-lookup-relational-data-in-a-v-data-table-with-vue-and-sqlserver#comment103283209_58429988
Спасибо, @Чанс. Это был 50% правильный ответ, поскольку пользователь не будет редактировать данные, встроенные в таблицу, можно изменить запрос te, чтобы добавить необходимые поля имени.
https://stackoverflow.com/questions/58429988/display-lookup-relational-data-in-a-v-data-table-with-vue-and-sqlserver#comment103283344_58429988
@chans к сожалению, ответ, который вы предоставили, не сработал.

Ответы - Отображение поиска / реляционных данных в таблице v-data с помощью Vue и SQLServer / Display lookup/relational data in a v-data-table with Vue and SQLServer

chans

17.10.2019 07:59:28

Является ответом!
Louwrens Potgieter

20.10.2019 07:45:16

ответ @chans привел меня на правильный путь.

Поскольку пользователи не будут редактировать данные в таблице "In-line", можно изменить запрос, чтобы показать необходимые данные (AssetMake.Name и еще AsseteModel.Name).

Я использую диалоговое окно с формой для редактирования и добавления активов. Затем я использую v-select для отображения данных поиска следующим образом:

<v-col cols="12" sm="6" md="4">
  <v-select v-model="editedItem.FKModel" :items="assetModels" item-text="Name" item-value="ID" label="Model" autocomplete></v-select>
</v-col>

assetModels содержит все модели активов и был извлечен из базы данных при смонтированном событии.

Спасибо всем, кто участвовал.

Закрыть X