mkw-visit-web/src/views/toolbox/list.vue

<template>
  <div class="container">
    <!-- 查询配置 -->
    <div style="padding: 0px 20px">
      <div ref="lxHeader">
        <LxHeader icon="md-apps" text="工具箱信息管理" style="margin-bottom: 10px; border: 0px; margin-top: 15px">
          <div slot="content"></div>
          <slot>
            <div>
              <Select v-model="searchFields.status" style="width:150px" placeholder="在线状态搜索">
                <Option v-for="item in options" :value="item.value" :key="item.value">{{ item.label }}</Option>
              </Select>
              <Input style="width: 200px; margin-right: 10px;margin-left: 10px" v-model.number="searchFields.keyword"
                placeholder="关键词搜索" />
              <Button type="primary" @click="search" style="margin-left: 10px">查询</Button>
              <Button type="primary" @click="edit()" style="margin-left: 10px">接入工具箱</Button>

              <a style="margin-left: 10px" href="/res/template-box.xlsx" class="ivu-btn ivu-btn-primary"><i
                  class="ivu-icon ivu-icon-ios-download-outline"></i><span>下载模版</span></a>
              <Button icon="md-cloud-upload" style="margin-left: 10px" @click="toImport" type="primary">批量导入</Button>
            </div>
          </slot>
        </LxHeader>
      </div>
      <div class="box">
        <el-row :gutter="20">
          <el-col v-for="(item,index) in dataList" :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
            <el-card class="box-card">
              <div class="box-top">
                <div class="box-line">
                  <div class="box-line-left">
                    <Icon custom="iconfont icon-serialnumber" size="18" />
                    <span style="margin-left: 5px;">{{item.box_id}}</span>
                    <Icon title="手动同步" @click="syncData(item.id)" custom="iconfont icon-tongbu" size="18" />
                  </div>
                  <div class="box-line-right">
                    <span style="color: #13ce66;margin-left: 5px;" v-if="item.status=='active'">
                      开启
                    </span>
                    <span style="color: #ff4949;margin-left: 5px;" v-else>
                      关闭
                    </span>
                  </div>
                </div>
              </div>
              <div class="box-content">
                <div class="box-line">
                  <div class="box-line-left">
                    <span class="">IP地址</span>
                  </div>
                  <div class="box-line-right">

                    {{item.ip}}
                  </div>
                </div>
                <div class="box-line">
                  <div class="box-line-left">
                    <span class="">名称</span>
                  </div>
                  <div class="box-line-right">

                    {{item.name}}
                  </div>
                </div>
                <div class="box-line">
                  <div class="box-line-left">
                    <span class="">层数</span>
                  </div>
                  <div class="box-line-right">

                    {{item.layer_amount}}
                  </div>
                </div>
                <div class="box-line">
                  <div class="box-line-left">
                    <span class="">责任人</span>
                  </div>
                  <div class="box-line-right">
                    {{item.contact}}
                  </div>
                </div>
                <div class="box-line">
                  <div class="box-line-left">
                    <span class="">通知电话</span>
                  </div>
                  <div class="box-line-right">
                    {{item.mobile}}
                  </div>
                </div>
              </div>
              <div class="box-footer">
                <div class="box-line" style="cursor: pointer;">
                  <div class="box-line-left" @click="edit(item)" style="color: #122583;">
                    <Icon custom="iconfont icon-edit" size="20" />
                    <span style="margin-left: 5px;">修改</span>
                  </div>
                  <div class="box-line-right" @click="del(item)" style="cursor: pointer;color: #ff4949;">
                    <Icon custom="iconfont icon-delete" size="20" />
                    <span style="margin-left: 5px;">删除</span>
                  </div>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
        <div class="box-pagination">
          <el-pagination background @current-change="handleCurrentChange" layout="prev, pager, next"
            :page-size="pagination.page_size" :current-page="pagination.page" :total="pagination.total">
          </el-pagination>
        </div>
      </div>

    </div>


    <el-dialog title="批量导入工具箱" :visible.sync="dialogImportVisible" width="60%">
      <div>
        <el-upload action="/api/admin/upload-file" ref="uploadExcel" :data="uploadOther" :limit="1"
          :on-success="handlesuccess">
          <el-button size="small" type="primary">点击上传</el-button>
          <div slot="tip" class="el-upload__tip">只能上传xlsx文件，且不超过500kb</div>
        </el-upload>
      </div>
      <div ref="lxTable" class="table-tree">
        <el-table :data="tableExcelData" class="v-table" :height="tableHeight" style="width: 100%">
          <el-table-column :prop="column.field" :align="column.align" v-for="(column,index) in columns"
            :label="column.title" :width="column.width">
            <template slot-scope="scope">
              <div>{{scope.row[column.field]}}</div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogImportVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleImport">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="接入工具箱" :visible.sync="dialogFormVisible" width="30%">
      <el-form :model="form" :rules="rules" ref="form" label-position="right" :label-width="formLabelWidth">
        <el-form-item label="编号/唯一的ID" prop="box_id">
          <el-input v-model="form.box_id" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="IP地址" prop="ip">
          <el-input v-model="form.ip" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="名称" prop="name">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="层数" prop="layer_amount">
          <el-input v-model="form.layer_amount" type="number" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="每层箱子数" prop="layer_tool_amount">
          <el-input v-model="form.layer_tool_amount" type="number" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="责任人" prop="contact">
          <el-input v-model="form.contact" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="通知电话" prop="mobile">
          <el-input v-model="form.mobile" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm('form')">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import LxHeader from "@/components/LxHeader/index.vue";
  import {
    listToolbox,
    save,
    del,
    syncData,
    checkStructure,
    testConnection,
    previewimport,
    doimport
  } from "../../api/toolbox/list.js"
  import {
    getToken
  } from '@/utils/auth'
  export default {
    components: {
      LxHeader
    },
    created() {
      this.uploadOther.token = getToken();
      this.load();

      var clientHeight = document.documentElement.clientHeight
      this.tableHeight = clientHeight * .3;
    },
    mounted() {},
    data() {

      var validatePhone = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入通知电话'));
        } else if (!this.base.isPhone(value)) {
          callback(new Error('请输入正确通知电话'));
        } else {
          callback();
        }
      };
      return {
        columns: [{
            field: "box_id",
            title: "编号/唯一的ID",
            type: "string",
            width: 150
          },
          {
            field: "ip",
            title: "ip地址",
            type: "string",
            width: 120
          },
          {
            field: "name",
            title: "名称",
            type: "string"
          },
          {
            field: "layer_amount",
            title: "层数",
            type: "string",
            width: 100
          },
          {
            field: "layer_tool_amount",
            title: "每层工具数",
            type: "string",
            width: 100
          },
          {
            field: "contact",
            title: "责任人",
            type: "string",
            width: 120
          },
          {
            field: "mobile",
            title: "通知电话",
            type: "string",
            width: 120
          }
        ],
        tableExcelData: [],
        options: [{
          value: "",
          label: "所有"
        }, {
          value: "active",
          label: "在线"
        }, {
          value: "inactive",
          label: "离线"
        }],
        dialogImportVisible: false,
        searchFields: {
          status: "",
          keyword: ""
        },
        dialogFormVisible: false,
        tableHeight: 0,
        form: {
          name: "",
          box_id: "",
          ip: "",
          layer_amount: 0,
          layer_tool_amount: 0,
          contact: "",
          mobile: ""

        },
        rules: {
          box_id: [{
            required: true,
            message: '请输入编号/唯一的ID',
            trigger: 'blur'
          }],
          layer_amount: [{
            required: true,
            message: '请输入层数',
            trigger: 'blur'
          }],
          layer_tool_amount: [{
            required: true,
            message: '请输入每层箱子数',
            trigger: 'blur'
          }],
          mobile: [{
            required: true,
            validator: validatePhone,
            trigger: 'blur'
          }],
          contact: [{
            required: true,
            message: '请输入责任人',
            trigger: 'blur'
          }],
          ip: [{
            required: true,
            message: '请输入IP地址',
            trigger: 'blur'
          }],
          name: [{
            required: true,
            message: '请输入名称',
            trigger: 'blur'
          }]
        },
        formLabelWidth: "120px",
        dataList: [],
        pagination: {
          total: 0,
          page: 1,
          page_size: 8
        },
        uploadOther: {
          token: ""
        },
        uploadPath: ""
      };
    },
    methods: {
      syncData(id) {
        syncData(id).then(res => {
          this.$message.success("已同步");
          this.search();
        }).catch(error => {})
      },
      handlesuccess(response, file, filelist) {
        console.log(response)
        this.uploadPath = response.path;
        previewimport({
          file_path: response.path
        }).then(res => {
          if (res.errors.length > 0) {
            this.$message.error(res.errors[0])
          } else
            this.tableExcelData = res.data;
          this.$refs.uploadExcel.clearFiles();
        }).catch(error => {

        })
      },
      handleImport() {
        if (this.uploadPath == "") {
          this.$message.error("请上传附件");
          return;
        }
        doimport({
          file_path: this.uploadPath
        }).then(res => {
          if (res.length != 0) {
            this.$message.error(res.join(","))
          } else {
            this.search();
            this.dialogImportVisible = false;
            this.tableExcelData = [];
          }
          this.uploadPath = "";
          this.$refs.uploadExcel.clearFiles();
        }).catch(error => {

        })
      },
      toImport() {
        this.uploadPath = "";
        this.tableExcelData = [];
        this.dialogImportVisible = true;
      },
      handleCurrentChange(page) {
        this.pagination.page = page;
        this.load();
      },
      search() {
        this.pagination.page = 1;
        this.load();
      },
      load() {
        var that = this;
        listToolbox({
          page: that.pagination.page,
          page_size: that.pagination.page_size,
          keyword: that.searchFields.keyword,
          status: that.searchFields.status
        }).then((res) => {
          that.dataList = res.data;
          that.pagination.total = res.total;
        }).catch(error => {
          console.log(error)
          // reject(error)
        })
      },
      edit(obj) {
        this.form = this.$options.data().form
        if (obj) {
          var result = Object.assign(this.form, obj)
          this.form = result;
        }
        this.dialogFormVisible = true;
      },
      toexport() {

      },
      addchildren(obj) {
        this.form = this.$options.data().form
        if (obj) {
          this.form.pname = obj.name;
          this.form.pid = obj.id;
          this.dialogFormVisible = true;
        }
      },
      submitForm(formName) {
        var that = this;
        this.$refs[formName].validate((valid) => {
          if (valid) {
            save(that.form).then(response => {
              console.log(response)
              this.$Message.success('操作成功');
              that.dialogFormVisible = false;
              that.load();
            }).catch(error => {
              reject(error)
            })
          } else {
            this.$Message.error('数据校验失败');
            return false;
          }
        });
      },
      resetForm(formName) {
        var that = this;
        this.$refs[formName].resetFields();
        that.dialogFormVisible = false;
      },
      del(obj) {
        var that = this;
        if (obj) {
          this.$Modal.confirm({
            title: '确认要删除数据？',
            onOk: () => {
              del({
                id: obj.id
              }).then(response => {
                this.$Message.success('操作成功');
                that.load();
              }).catch(error => {
                console.log(error)
                reject(error)
              })
            },
            onCancel: () => {
              //this.$Message.info('Clicked cancel');
            }
          });
        }
      }
    }
  };
</script>
<style lang="scss" scoped>
  .box-pagination {
    display: flex;
    justify-content: flex-end;
  }

  .box {
    padding: 10px 20px;
    background: #FFFFFF;

    .el-row {
      margin-bottom: 20px;

      &:last-child {
        margin-bottom: 0;
      }
    }

    .el-col {
      border-radius: 4px;
      margin-bottom: 15px;
    }

    .icon-serialnumber {
      color: #122583;
    }

    .el-card {
      .box-content {
        display: flex;
        width: 100%;
        flex-direction: column;


      }

      .icon-tongbu {
        margin-left: 10px;
        color: #13CE66;
        cursor: pointer;
      }

      .box-top {
        margin-bottom: 15px;

        .box-line {
          border-bottom: 2px solid #122583;
          padding: 10px 0px;
        }

        .box-line-left {
          display: flex;
          align-items: center;
        }

        .box-line-right {
          display: flex;
          align-items: center;
        }
      }

      .box-footer {
        margin-top: 15px;

        .box-line {
          border-bottom: none;
          padding: 10px 0px;
          font-size: 16px;
        }
      }

      .box-line {
        width: 100%;
        display: flex;
        justify-content: space-between;
        border-bottom: 1px solid #BFCBD9;
        margin-bottom: 10px;

        &:last-child {
          margin-bottom: 0;
        }
      }
    }
  }
</style>