zm_vr_house_back/src/view/firmware/index.vue

<template>
  <com-head :options="headList" showCtrl>
    <el-form label-width="90px" inline="true">
      <el-form-item label="发布时间：">
        <el-date-picker
          v-model="search.state.time"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item class="searh-btns">
        <el-button @click="search.reset">重置</el-button>
        <el-button type="primary" @click="search.submit">查询</el-button>
      </el-form-item>
    </el-form>
  </com-head>

  <div class="body-layer">
    <div class="body-head">
      <h3>固件列表</h3>
      <div class="table-ctrl-right">
        <el-input placeholder="关键词" suffix-icon="el-icon-search" class="search-scene" v-model="search.state.keyword" style="width: auto" />
        <el-button
          type="primary"
          icon="el-icon-upload2"
          @click="oper.readyInsert"
          >上传</el-button
        >
      </div>
    </div>

    <el-table
      ref="multipleTable"
      :data="dataList.state"
      tooltip-effect="dark"
      style="width: 100%"
      @row-click="selectRow"
    >
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column label="序号" prop="name"></el-table-column>
      <el-table-column label="描述" prop="name"></el-table-column>
      <el-table-column label="版本" prop="name"></el-table-column>
      <el-table-column label="文件地址" prop="name"></el-table-column>
      <el-table-column label="状态" prop="name" v-slot:default="{ row }">
        <el-switch
          @change="changeStatus(row)"
          v-model="row.address"
          active-color="#13ce66"
          inactive-color="#ff4949">
        </el-switch>
      </el-table-column>
      <el-table-column label="发布日期" prop="name"></el-table-column>
    </el-table>
    <div class="pag-block">
      <el-pagination
        @size-change="pag.sizeChange"
        @current-change="pag.currentChange"
        :current-page="pag.state.currPage"
        :page-size="pag.state.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pag.state.total"
      >
      </el-pagination>
    </div>
  </div>
  
  <com-dialog
    title="添加版本"
    v-model:show="oper.state.show"
    @submit="insertItem"
  >
    <el-form ref="form" :model="form" label-width="100px" class="firmware-from">
      <el-form-item label="版本：" class="mandatory">
        <el-input v-model="oper.state.name"></el-input>
      </el-form-item>
      <el-form-item label="描述：">
        <el-input type="textarea" v-model="oper.state.name"></el-input>
      </el-form-item>
      <el-form-item label="文件上传：" class="mandatory">
        <el-button type="primary" class="file-upload">
          <label for="file-upload">文件上传</label>
        </el-button>
        <input type="file" id="file-upload" @change="fileChange">
      </el-form-item>
    </el-form>
  </com-dialog>
</template>

<script>
import { ref } from "vue";
import getTableState from "@/state/tableRef";
import comDialog from "@/components/dialog";
import comHead from "@/components/head";

export default {
  name: 'firmware',
  setup() {
    const state = getTableState({
      operAttr: { name: "" },
      searchAttr: { time: "", keyword: '' },
    });
    const headList = ref([{ name: "我的固件（12）", value: 2 }]);

    return { ...state, headList };
  },
  methods: {
    changeStatus(data) {
      console.log(data)
    },
    insertItem() {

    },
    fileChange() {
      
    }
  },
  components: {
    "com-dialog": comDialog,
    "com-head": comHead
  },
};
</script>

<style lang="scss" scoped>
.table-ctrl-right {
  .search-scene {
    margin: 0 20px 0 26px;
  }
  i {
    margin-left: 20px;
    font-size: 1.7rem;
    vertical-align: middle;
    cursor: pointer;

    &.active {
      color: var(--primaryColor);
    }
  }
}

.firmware-from {
  width: 320px;
  margin: 0 auto;
}


.file-upload {
  padding: 0;

  label {
    display: inline-block;
    padding: 12px 20px;
  }
}

input[type='file'] {
  display: none;
}
</style>