修改前端

Yi.Vue/src/components/Links.vue

@@ -0,0 +1,68 @@
+<template>
+  <v-container>
+    <v-row align="center">
+      <v-col
+        v-for="(link, i) in links"
+        :key="i"
+        class="text-center"
+        cols="6"
+        md="auto"
+      >
+        <a
+          :href="link.href"
+          class="text-decoration-none text-uppercase text-caption font-weight-regular"
+          rel="noopener"
+          target="_blank"
+          v-text="link.text"
+        />
+      </v-col>
+
+      <v-spacer class="hidden-sm-and-down" />
+
+      <v-col
+        cols="12"
+        md="auto"
+      >
+        <div class="text-body-1 font-weight-light pt-6 pt-md-0 text-center">
+          &copy; {{ (new Date()).getFullYear() }}, Made by <v-icon>mdi-vuetify</v-icon>
+          <a
+            href="https://vuetifyjs.com/en/about/meet-the-team/#company"
+            class="text-decoration-none"
+          >Vuetify</a>
+        </div>
+      </v-col>
+    </v-row>
+  </v-container>
+</template>
+
+<script>
+  export default {
+    name: 'Links',
+
+    data: () => ({
+      links: [
+        {
+          href: 'https://vuetifyjs.com/',
+          text: 'Vuetify Docs',
+        },
+        {
+          href: '#',
+          text: 'About Us',
+        },
+        {
+          href: '#',
+          text: 'Blog',
+        },
+        {
+          href: '#',
+          text: 'Licenses',
+        },
+      ],
+    }),
+  }
+</script>
+
+<style lang="sass" scoped>
+  a
+    color: inherit !important
+</style>

Yi.Vue/src/components/MaterialAlert.vue

@@ -0,0 +1,59 @@
+<template>
+  <v-alert
+    class="v-alert--material"
+    dark
+    v-bind="$attrs"
+    v-on="$listeners"
+  >
+    <template
+      v-if="$attrs.icon"
+      v-slot:prepend
+    >
+      <v-avatar
+        class="align-self-start mt-n9 elevation-6 mr-4"
+        size="38"
+      >
+        <v-icon
+          :color="$attrs.color"
+          class="elevation-6 white"
+          light
+        >
+          {{ $attrs.icon }}
+        </v-icon>
+      </v-avatar>
+    </template>
+
+    <slot />
+
+    <template
+      v-if="$attrs.dismissible"
+      v-slot:close="{ toggle }"
+    >
+      <v-btn
+        :aria-label="$vuetify.lang.t('$vuetify.close')"
+        class="ml-4"
+        color
+        icon
+        small
+        @click="toggle"
+      >
+        <v-icon>
+          $vuetify.icons.cancel
+        </v-icon>
+      </v-btn>
+    </template>
+  </v-alert>
+</template>
+
+<script>
+  export default { name: 'MaterialAlert' }
+</script>
+
+<style lang="sass">
+  .v-alert--material
+    margin-top: 32px
+
+    .v-alert__dismissible
+      align-self: flex-start
+      margin: 0 0 0 16px !important
+</style>

Yi.Vue/src/components/MaterialCard.vue

@@ -0,0 +1,113 @@
+<template>
+  <app-card
+    v-bind="$attrs"
+    class="v-card--material mt-4"
+  >
+    <v-card-title class="align-start">
+      <v-sheet
+        :color="color"
+        :width="fullHeader ? '100%' : undefined"
+        class="overflow-hidden mt-n9 transition-swing v-card--material__sheet"
+        elevation="6"
+        max-width="100%"
+        rounded
+      >
+        <v-theme-provider
+          v-if="hasHeading"
+          dark
+        >
+          <div
+            v-if="icon"
+            :class="iconSmall ? 'pa-7' : 'pa-8'"
+          >
+            <v-icon
+              :large="!iconSmall"
+              v-text="icon"
+            />
+          </div>
+
+          <slot name="heading" />
+
+          <div
+            v-if="heading"
+            class="text-h4 white--text pa-7 v-card--material__title"
+          >
+            {{ heading }}
+          </div>
+        </v-theme-provider>
+      </v-sheet>
+
+      <div
+        v-if="hasTitle"
+        :class="fullHeader ? 'pt-4' : 'pl-3'"
+        class="text-h4 v-card--material__title"
+      >
+        <slot name="title" />
+
+        <template v-if="title">
+          {{ title }}
+        </template>
+
+        <div class="text-subtitle-1 mb-n4">
+          <slot name="subtitle" />
+
+          <template v-if="subtitle">
+            {{ subtitle }}
+          </template>
+        </div>
+      </div>
+    </v-card-title>
+
+    <slot />
+
+    <template v-if="$slots.actions">
+      <v-divider class="mt-2 mx-4" />
+
+      <v-card-actions class="px-4 text-caption grey--text">
+        <slot name="actions" />
+      </v-card-actions>
+    </template>
+  </app-card>
+</template>
+
+<script>
+  export default {
+    name: 'MaterialCard',
+
+    props: {
+      color: String,
+      fullHeader: Boolean,
+      heading: String,
+      icon: String,
+      iconSmall: Boolean,
+      subtitle: String,
+      title: String,
+    },
+
+    computed: {
+      hasHeading () {
+        return !!(
+          this.icon ||
+          this.heading ||
+          this.$slots.heading
+        )
+      },
+      hasTitle () {
+        return !!(
+          this.title ||
+          this.subtitle ||
+          this.$slots.title ||
+          this.$slots.subtitle
+        )
+      },
+    },
+  }
+</script>
+
+<style lang="sass">
+  .v-card.v-card--material
+    > .v-card__title
+      > .v-card--material__title
+        flex: 1 1 auto
+        word-break: break-word
+</style>

Yi.Vue/src/components/MaterialChartCard.vue

@@ -0,0 +1,93 @@
+<template>
+  <material-card
+    v-bind="$attrs"
+    class="v-card--material-chart"
+    full-header
+  >
+    <template #heading>
+      <div class="pa-4">
+        <chartist
+          :data="data"
+          :event-handlers="eventHandlers"
+          :options="options"
+          :ratio="ratio"
+          :responsive-options="responsiveOptions"
+          :type="type"
+          style="max-height: 150px;"
+        />
+      </div>
+    </template>
+
+    <template #subtitle>
+      <slot name="subtitle" />
+    </template>
+
+    <slot />
+
+    <template #actions>
+      <slot name="actions" />
+    </template>
+  </material-card>
+</template>
+
+<script>
+  export default {
+    name: 'MaterialChartCard',
+
+    inheritAttrs: false,
+
+    props: {
+      data: {
+        type: Object,
+        default: () => ({}),
+      },
+      eventHandlers: {
+        type: Array,
+        default: () => ([]),
+      },
+      options: {
+        type: Object,
+        default: () => ({}),
+      },
+      ratio: String,
+      responsiveOptions: {
+        type: Array,
+        default: () => ([]),
+      },
+      type: {
+        type: String,
+        required: true,
+        validator: v => ['Bar', 'Line', 'Pie'].includes(v),
+      },
+    },
+  }
+</script>
+
+<style lang="sass">
+  .v-card--material-chart
+    p
+      color: #999
+
+    .v-card--material__sheet
+      max-height: 185px
+      width: 100%
+
+      .ct-label
+        color: rgba(255, 255, 255, 1)
+        opacity: .7
+        font-size: 0.875rem
+        font-weight: 300
+
+      .ct-grid
+        stroke: hsla(0,0%,100%,.2)
+
+      .ct-series-a .ct-point,
+      .ct-series-a .ct-line,
+      .ct-series-a .ct-bar,
+      .ct-series-a .ct-slice-donut
+          stroke: rgba(255,255,255,.8)
+
+      .ct-series-a .ct-slice-pie,
+      .ct-series-a .ct-area
+          fill: rgba(255,255,255,.4)
+</style>

Yi.Vue/src/components/MaterialSnackbar.vue

@@ -0,0 +1,78 @@
+<template>
+  <v-snackbar
+    v-model="internalValue"
+    class="v-snackbar--material"
+    v-bind="{
+      ...$attrs,
+      'color': 'transparent'
+    }"
+  >
+    <material-alert
+      v-model="internalValue"
+      :color="$attrs.color"
+      :dismissible="dismissible"
+      :type="type"
+      class="ma-0"
+      dark
+    >
+      <slot />
+    </material-alert>
+  </v-snackbar>
+</template>
+
+<script>
+  export default {
+    name: 'MaterialSnackbar',
+
+    props: {
+      dismissible: {
+        type: Boolean,
+        default: true,
+      },
+      type: {
+        type: String,
+        default: '',
+      },
+      value: Boolean,
+    },
+
+    data () {
+      return {
+        internalValue: this.value,
+      }
+    },
+
+    watch: {
+      internalValue (val, oldVal) {
+        if (val === oldVal) return
+
+        this.$emit('input', val)
+      },
+      value (val, oldVal) {
+        if (val === oldVal) return
+
+        this.internalValue = val
+      },
+    },
+  }
+</script>
+
+<style lang="sass">
+  .v-snackbar--material
+    margin-top: 32px
+    margin-bottom: 32px
+
+    .v-alert
+      padding: 32px 16px
+
+    .v-alert--material,
+    .v-snack__wrapper
+      border-radius: 4px
+
+    .v-snack__content
+      overflow: visible
+      padding: 0
+
+    .v-snack__action
+      display: none
+</style>

Yi.Vue/src/components/MaterialStatsCard.vue

@@ -0,0 +1,39 @@
+<template>
+  <material-card
+    class="v-card--material-stats"
+    v-bind="$attrs"
+    v-on="$listeners"
+  >
+    <template #subtitle>
+      <div
+        class="text-right text-h3 v-card__subtitle--material-stats"
+        v-text="value"
+      />
+    </template>
+
+    <template #actions>
+      <slot name="actions" />
+    </template>
+
+    <slot />
+  </material-card>
+</template>
+
+<script>
+  export default {
+    name: 'MaterialStatCard',
+
+    props: { value: String },
+  }
+</script>
+
+<style lang="sass">
+.v-card--material-stats.v-card--material .v-card--material__title
+  color: #999999
+  font-size: .875rem !important
+  margin-left: auto
+  text-align: right
+
+.v-card__subtitle--material-stats
+  color: #3C4858
+</style>

Yi.Vue/src/components/Table.vue

@@ -0,0 +1,214 @@
+<template>
+  <v-card>
+    <v-data-table
+      :headers="headers"
+      :items="desserts"
+      sort-by="calories"
+      class="elevation-1"
+      item-key="id"
+      show-select
+      v-model="selected"
+      :search="search"
+    >
+      <template v-slot:top>
+        <!-- 搜索框 -->
+        <v-toolbar flat>
+          <v-spacer></v-spacer>
+          <v-text-field
+            v-model="search"
+            append-icon="mdi-magnify"
+            label="搜索"
+            single-line
+            hide-details
+            class="mx-4"
+          ></v-text-field>
+
+          <v-btn color="primary" dark class="mb-2 mx-2" @click="dialog = true">
+            添加新项
+          </v-btn>
+
+          <!-- 添加提示框 -->
+          <v-dialog v-model="dialog" max-width="500px">
+            <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-for="(value, key, index) in editedItem"
+                      :key="index"
+                    >
+                      <v-text-field
+                        v-model="editedItem[key]"
+                        :label="key"
+                      ></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"> 取消 </v-btn>
+                <v-btn color="blue darken-1" text @click="save"> 保存 </v-btn>
+              </v-card-actions>
+            </v-card>
+          </v-dialog>
+
+          <v-btn color="red" dark class="mb-2" @click="deleteItem(null)">
+            删除所选
+          </v-btn>
+
+          <!-- 删除提示框 -->
+          <v-dialog v-model="dialogDelete" max-width="500px">
+            <v-card>
+              <v-card-title class="headline"
+                >你确定要删除此条记录吗？</v-card-title
+              >
+              <v-card-actions>
+                <v-spacer></v-spacer>
+                <v-btn color="blue darken-1" text @click="closeDelete"
+                  >取消</v-btn
+                >
+                <v-btn color="blue darken-1" text @click="deleteItemConfirm"
+                  >确定</v-btn
+                >
+                <v-spacer></v-spacer>
+              </v-card-actions>
+            </v-card>
+          </v-dialog>
+        </v-toolbar>
+      </template>
+
+      <!-- 表格中的删除和修改 -->
+      <template v-slot:item.actions="{ item }">
+        <v-icon small class="mr-2" @click="editItem(item)"> mdi-pencil </v-icon>
+        <v-icon small @click="deleteItem(item)"> mdi-delete </v-icon>
+      </template>
+
+      <!-- 初始化 -->
+      <template v-slot:no-data>
+        <v-btn color="primary" @click="initialize"> 刷新 </v-btn>
+      </template>
+    </v-data-table>
+  </v-card>
+</template>
+<script>
+import itemApi from './TableApi.js'
+export default {
+  name: 'Tables',
+  props: {
+    defaultItem: {
+      type: Object,
+    },
+    headers: {
+      type: Array,
+    },
+    axiosUrls:{
+        type: Object,
+    }
+  },
+
+  data: () => ({
+    page: 1,
+    selected: [],
+    search: "",
+    dialog: false,
+    dialogDelete: false,
+    desserts: [],
+    editedIndex: -1,
+    editedItem: {},
+  }),
+
+  computed: {
+    formTitle() {
+      return this.editedIndex === -1 ? "添加数据" : "编辑数据";
+    },
+  },
+
+  watch: {
+    dialog(val) {
+      val || this.close();
+    },
+    dialogDelete(val) {
+      val || this.closeDelete();
+    },
+  },
+
+  created() {
+    this.initialize();
+  },
+
+  methods: {
+    initialize() {
+        itemApi.getItem(this.axiosUrls.get).then((resp) => {
+          const response = resp.data;
+          this.desserts = response;
+        });
+    
+      this.$nextTick(() => {
+        this.editedItem = Object.assign({}, this.defaultItem);
+        this.editedIndex = -1;
+      });
+    },
+    // 添加和修改都打开同一个编辑框
+
+    editItem(item) {
+      this.editedIndex = this.desserts.indexOf(item);
+      this.editedItem = Object.assign({}, item);
+      this.dialog = true;
+    },
+
+    deleteItem(item) {
+      this.editedIndex = this.desserts.indexOf(item);
+      this.editedItem = Object.assign({}, item);
+      this.dialogDelete = true;
+    },
+    deleteItemConfirm() {
+      var Ids = [];
+      if (this.editedIndex > -1) {
+        Ids.push(this.editedItem.id);
+      } else {
+        this.selected.forEach(function (item) {
+          Ids.push(item.id);
+        });
+      }
+      alert("多行删除");
+        ItemApi.delItemList(this.axiosUrls.del,Ids).then(() => this.initialize());
+      this.closeDelete();
+    },
+    close() {
+      this.dialog = false;
+      this.$nextTick(() => {
+        this.editedItem = Object.assign({}, this.defaultItem);
+        this.editedIndex = -1;
+      });
+    },
+
+    closeDelete() {
+      this.dialogDelete = false;
+      this.$nextTick(() => {
+        this.editedItem = Object.assign({}, this.defaultItem);
+        this.editedIndex = -1;
+      });
+    },
+
+    save() {
+      if (this.editedIndex > -1) {
+        alert("多行更新");
+        ItemApi.updateItem(this.axiosUrls.update,this.editedItem).then(() => this.initialize());
+      } else {
+        alert("添加");
+        ItemApi.addItem(this.axiosUrls.add,this.editedItem).then(() => this.initialize());
+      }
+      this.close();
+    },
+  },
+};
+</script>

Yi.Vue/src/components/TableApi.js

@@ -0,0 +1,30 @@
+import myaxios from '@/util/myaxios'
+export default {
+    getItem(url) {
+        return myaxios({
+            url: url,
+            method: 'get'
+        })
+    },
+    addItem(url, data) {
+        return myaxios({
+            url: url,
+            method: 'post',
+            data: data
+        })
+    },
+    updateItem(url, data) {
+        return myaxios({
+            url: url,
+            method: 'cut',
+            data: data
+        })
+    },
+    delItemList(url, Ids) {
+        return myaxios({
+            url: url,
+            method: 'del',
+            data: Ids
+        })
+    },
+}

Yi.Vue/src/components/ViewIntro.vue

@@ -0,0 +1,37 @@
+<template>
+  <section class="mb-12 text-center">
+    <h1
+      class="mb-2 text-h3"
+      v-text="heading"
+    />
+
+    <div
+      v-if="link"
+      class="text-body-2 font-weight-light"
+    >
+      Please checkout the <a
+        :href="`https://vuetifyjs.com/en/${link}`"
+        class="text-decoration-none secondary--text"
+        target="_blank"
+      >full documentation</a>
+    </div>
+
+    <v-responsive
+      class="text-center mx-auto text-body-1 font-weight-light"
+      max-width="400"
+    >
+      <slot />
+    </v-responsive>
+  </section>
+</template>
+
+<script>
+  export default {
+    name: 'ViewIntro',
+
+    props: {
+      heading: String,
+      link: String,
+    },
+  }
+</script>

Yi.Vue/src/components/app/BarItem.vue

@@ -0,0 +1,29 @@
+<script>
+  import { VHover, VListItem } from 'vuetify/lib'
+
+  export default {
+    name: 'AppBarItem',
+
+    render (h) {
+      return h(VHover, {
+        scopedSlots: {
+          default: ({ hover }) => {
+            return h(VListItem, {
+              attrs: this.$attrs,
+              class: {
+                'black--text': !hover,
+                'white--text secondary elevation-12': hover,
+              },
+              props: {
+                activeClass: '',
+                dark: hover,
+                link: true,
+                ...this.$attrs,
+              },
+            }, this.$slots.default)
+          },
+        },
+      })
+    },
+  }
+</script>

Yi.Vue/src/components/app/Btn.vue

@@ -0,0 +1,22 @@
+<template>
+  <v-btn
+    :color="color"
+    v-bind="$attrs"
+    v-on="$listeners"
+  >
+    <slot />
+  </v-btn>
+</template>
+
+<script>
+  export default {
+    name: 'AppBtn',
+
+    props: {
+      color: {
+        type: String,
+        default: 'primary',
+      },
+    },
+  }
+</script>

Yi.Vue/src/components/app/Card.vue

@@ -0,0 +1,12 @@
+<template>
+  <v-card
+    v-bind="$attrs"
+    v-on="$listeners"
+  >
+    <slot />
+  </v-card>
+</template>
+
+<script>
+  export default { name: 'AppCard' }
+</script>

Yi.Vue/src/components/app/Tabs.vue

@@ -0,0 +1,42 @@
+<template>
+  <v-tabs
+    :active-class="`${color} ${theme.isDark ? 'black' : 'white'}--text`"
+    class="v-tabs--pill"
+    hide-slider
+    v-bind="$attrs"
+    v-on="$listeners"
+  >
+    <slot />
+
+    <slot name="items" />
+  </v-tabs>
+</template>
+
+<script>
+  export default {
+    name: 'AppTabs',
+
+    inject: ['theme'],
+
+    props: {
+      color: {
+        type: String,
+        default: 'primary',
+      },
+    },
+  }
+</script>
+
+<style lang="sass">
+  .v-tabs--pill
+    .v-tab,
+    .v-tab:before
+      border-radius: 24px
+
+    &.v-tabs--icons-and-text
+      &:not(.v-tabs--vertical) > .v-tabs-bar
+        height: 100px
+      .v-tab,
+      .v-tab:before
+        border-radius: 4px
+</style>