2021-3-25

前端实习-第5天

今天继续写增删改查的界面，解决组件之间的各种传参问题，下午mentor检查成果，我两天copy的一坨，还差功能的js逻辑、接口不如mentor一天全写完了，而且被发现query方式的接口传参不会，心累+1。但是呢，这几天的copy paste，让我学会了vue slot的用法、父子组件通信、获取子组件的方法和参数等方法。
一个实例：
Point.vue界面要引用ListView.vue组件，则Point是父组件，ListView是子组件。
父组件要引用自组件并进行数据的双向绑定：

    <ListView
      class="list-view devices"
      :list="list"
    >

然后，import子组件，在component里声明。

import ListView from '@/components/ListView.vue'

  components: {
   
    ListView
  },

如此父组件就可使用子组件了，剩下就是
父组件要传的参数是引用子组件时v-model绑定的，就是引号内的list，要在data里声明
巧记：等号左边在子组件里，右边在父组件里

:list="list"

data () {
   
    return {
   
      list: []
    }
  },

子组件则要接收父组件传过来的list，用props：

  props: {
   
    list: {
   
      type: Array,
      default: () => []
    }
    }

这里的type是数据类型，下面的default是默认值的意思，用了箭头函数，默认值为一个空数组。
最后，ListView里的el-table元素的data绑定props进来的list就可以显示表格数据了。

完整的父子组件代码如下：

<template>
  <div style="padding: 20px;">
    <ListView
      class="list-view devices"
      :list="list"
    >
      <template slot="header">
        <div class="subtitle__wrapper">
          <div class="subtitle">
            点位配置
          </div>
          <el-button
            style="float: right;"
            type="primary"
            icon="el-icon-plus"
            @click="onAdd"
          >
            新增点位
          </el-button>
        </div>
      </template>
      <template slot="columns">
        <el-table-column
          label="点位状态"
          width="180"
        >
        <template slot-scope="scoped">
          <el-switch
          :value="scoped.row.state === '已启用'"
          active-color="#007afe"
          inactive-color="#393939"
          @input="() => toggleTaskStatus(scoped.row)"
          >
          </el-switch>
        </template>
        </el-table-column>
        <el-table-column
          prop="name"
          label="点位名称"
        />
        <el-table-column
          prop="url"
          label="摄像头URL"
          show-overflow-tooltip
        />
        <el-table-column
          prop="name"
          label="识别类型"
          width="180"
        >
          <template slot-scope="scoped">
            <el-tag style="color: #fff; border-radius: 20px; padding: 0 20px;" :style="getTagColor(scoped.row.model_type)">
              {
   {
   getAlgoType(scoped.row.model_type).zh}}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column
          label="摄像头状态"
          width="180"
        >
          <template slot-scope="scoped">
            <el-tag size="small" :class="scoped.row.connectionState === '连接成功' ? 'connection-success' : 'connection-fail'" :type="scoped.row.connectionState === '连接成功' ? 'success' : 'danger'">{
   {
   scoped.row.connectionState || '连接失败'}}</el-tag>
          </template>
        </el-table-column>
      </template>

      <template slot="operation">
        <el-table-column
            prop="operation"
            label="操作"
            align="center"
        >
          <template slot-scope="scoped">
            <i class="el-icon-view operation-icon" @click="onEdit(scoped.row)"></i>
            <el-popconfirm
              title="确定删除点位吗？"
              @confirm="deletePoint(scoped.row.channel)"
            >
              <i class="el-icon-delete operation-icon" style="margin-left: 20px;" slot="reference"></i>
            </el-popconfirm>
          </template>
        </el-table-column>
      </template>
    </ListView>
    <Dialog
      ref="dialog"
      :title="dialogTitle"
      width="600px"
      :on-opened="onDialogOpened"
      :on-submit="onDialogSubmit"
    >
      <FormDevice :defaultValue="currentPoint" :disabledConfig="{
   
        channel: disabledChannel
      }" />
    </Dialog>
  </div>
</template>

<script>
import ListView from '@/components/ListView.vue'
import {
    GetPoint, DeletePoint, StopPoint, StartPoint, AddPoint, EditPoint } from '@/api/ports'
import {
    ALGO_TYPES } from '@/constant'
import Dialog from '@/components/Dialog.vue'
import FormDevice from '@/components/FormDevice.vue'
import io from 'socket.io-client'

export default {
   
  name: 'point',
  components: {
   
    ListView, Dialog, FormDevice
  },
  data () {
   
    return {
   
      list: [],
      disabledChannel: [],
      currentPoint: {
   },
      dialogMode: 'add'