zfb_cms/src/pages/equipment/index.vue

<template slot-scope="scope">
  <div class="con" v-loading.fullscreen.lock="loading">
    <el-dialog width="470px" title="添加相机" :visible.sync="cameraVisible" :show-close="false" :close-on-click-modal="false">
      <el-form label-width="80px" :rules="rules" :model="ruleForm">
        <el-form-item label="出库类型" prop="own">
          <el-select v-model="ruleForm.own" placeholder="请选择出库类型">
            <el-option label="正常销售" value="0"></el-option>
            <el-option label="礼品赠送" value="2"></el-option>
            <el-option label="员工自用" value="1"></el-option>
            <el-option label="其他" value="3"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="相机类型" prop="cameraType">
          <el-select v-model="ruleForm.cameraType" placeholder="请选择相机类型">
            <el-option label="四维看看Pro八目相机" value="4"></el-option>
            <el-option label="四维看看Lite双目相机" value="1"></el-option>
            <el-option label="四维看看双目转台相机" value="9"></el-option>
            <el-option label="四维看看激光相机" value="10"></el-option>
            <el-option label="第三方相机" value="6"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="设备ID" prop="childName">
          <el-input v-model="ruleForm.childName"></el-input>
        </el-form-item>
        <el-form-item label="wifi名称" prop="wifiName">
          <el-input v-model="ruleForm.wifiName"></el-input>
        </el-form-item>
        <el-form-item label="物理地址" prop="address">
          <el-input v-model="ruleForm.address"></el-input>
        </el-form-item>
        <el-form-item
          v-if="ruleForm.cameraType != '' && ruleForm.cameraType != 6"
          label="sn码" prop="snCode"
        >
          <el-input v-model="ruleForm.snCode"></el-input>
        </el-form-item>
        <el-form-item label="初始点数" prop="balance">
          <el-input v-model="ruleForm.balance"></el-input>
        </el-form-item>
        <el-form-item label="订单号" prop="orderSn">
          <el-input v-model="ruleForm.orderSn"></el-input>
        </el-form-item>
        <el-form-item label="客户名称" prop="compantId">
          <el-select v-model="ruleForm.companyId" placeholder="请选择">
            <el-option
              v-for="(item, i) in companyList"
              :key="i"
              :label="item.name"
              :value="item.id"
              >{{ item.name }}</el-option
            >
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="clearData">取 消</el-button>
        <el-button type="primary" @click="addCamera">确 定</el-button>
      </div>
    </el-dialog>

    <div class="h-header">
      <vcenter>
        <div class="h-input">
          <el-input v-model="userName" placeholder="请输入用户名"></el-input>
        </div>
        <div>
          <el-button type="primary" @click="getData">搜索</el-button>
        </div>
        <div style="float: right; padding-right: 20px">
          <el-button type="primary" @click="cameraVisible = true"
            >添加相机</el-button
          >
        </div>
        <!-- <div style="float:right;padding-right:50px">
                  <el-button type="primary" @click="ShebeiVisible = true">添加设备</el-button>
                </div> -->
      </vcenter>
    </div>

    <div class="h-body">
      <el-table
        height="520"
        :data="tableData"
        style="width: 100%; padding: 0 20px"
      >
        <el-table-column
          v-for="(item, i) in tableHeader"
          :key="i"
          :prop="item.name"
          :label="item.label"
        >
        </el-table-column>
        <!-- <el-table-column label="操作">
          <template slot-scope="scope">
            <div>
              <span>点数</span>
              <span>解绑</span>
            </div>
          </template>
        </el-table-column> -->
      </el-table>
      <div class="p-con">
        <el-pagination
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage"
          :page-size="size"
          layout="total, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import vcenter from "@/components/vcenter";
export default {
  components: { vcenter },
  data() {
    return {
      c_userName: "",
      loading: false,
      currentPage: 1,
      size: 10,
      total: 0,
      userName: "",
      companyList: [],
      childName: "",
      tableData: [],
      tableHeader: [
        { name: "childName", label: "设备ID" },
        { name: "userName", label: "手机号(用户名)" },
        // { name: "goodsName", label: "设备类型" },
        { name: "cameraType", label: "设备类型" },
        { name: "snCode", label: "sn码" },
        { name: "wifiName", label: "wifi"},
        { name: "activatedTime", label: "激活时间" },
        { name: "own", label: "出货类型" },
        { name: "companyName", label: "客户名称" },
        { name: "balance", label: "当前余额(点)" },
      ],
      // ShebeiVisible: false,
      cameraVisible: false,
      ruleForm: {
        wifiName: "",
        address: "",
        // initPoint: "",
        balance:"",
        cameraType: [],
        own: [],
        snCode: "",
        orderSn: "",
        companyId: "",
        childName:""
      },
      rules:{
        snCode: [{ required:true ,message:'sn码不能为空'}],
        own: [{required: true, message:'出库类型不能为空'}],
        cameraType: [{required: true, message:'相机类型不能为空'}],
        childName: [{required: true, message:'设备ID不能为空', trigger: 'blur'}],
        wifiName: [{required: true, message:'wifi名称不能为空', trigger: 'blur'}],
        address: [{required: true, message:'物理地址不能为空', trigger: 'blur'}],
        balance: [{required: true, message:'初始点数不能为空', trigger: 'blur'}],
        orderSn: [{required: true, message:'订单号不能为空', trigger: 'blur'}],
        companyId: [{required: true, message:'客户名称不能为空', trigger: 'blur'}]
      },
      // addEq: {
      //   userName: "",
      //   companyId: "",
      //   shebeiNum: "",
      //   shebeiId: "",
      // },
      addDevies: [
        {
          value: "",
          isAvailable: false,
          hasCheck: false,
        },
      ],
      errMsg: "",
      num: "",
    };
  },
  methods: {
    // handleSizeChange(val) {
    //   console.log(`每页 ${val} 条`);
    // },
    // handleCurrentChange(val) {
    //   console.log(`当前页: ${val}`);
    // },
    getData() {
      if (!Number(this.currentPage)) this.currentPage = 1;
      let params = {
        userName: this.userName || "",
      };
      this.$http({
        method: "post",
        data: params,
        url: "/camera/pageList",
        headers: {
          token: window.localStorage.getItem("zfb_token"),
          pageNum: this.currentPage,
          pageSize: this.size,
        },
      }).then((res) => {
        for(let i=0;i<res.message.list.length;i++){
          res.message.list[i].activatedTime = this.$base.dateFormat('yyyy-MM-dd hh:mm',new Date(res.message.list[i].activatedTime))
          res.message.list[i].own = this.ownToName(res.message.list[i].own)
          res.message.list[i].cameraType = this.typeToName(res.message.list[i].cameraType)
        }
        this.tableData = res.message.list;
        this.total = res.message.total;
        this.currentPage = res.message.pageNum
      });
    },
    addCamera() {
      if (this.ruleForm.cameraType != 6 && this.ruleForm.snCode == "") {
        this.$alert("sn码不能为空!", "提示", {
          confirmButtonText: "确定",
        });
        return;
      }
      let params = {
        wifiName: this.ruleForm.wifiName,
        address: this.ruleForm.address,
        // initPoint: this.ruleForm.initPoint,
        balance: this.ruleForm.balance,
        cameraType: this.ruleForm.cameraType,
        own: this.ruleForm.own,
        snCode: this.ruleForm.snCode,
        orderSn: this.ruleForm.orderSn,
        companyId: this.ruleForm.companyId,
        childName: this.ruleForm.childName
      };
      this.$http({
        method: "post",
        url: "/camera/add",
        data: params,
        headers: {
          token: window.localStorage.getItem("zfb_token"),
          pageNum: this.currentPage,
          pageSize: this.size,
        },
      }).then((res) => {
        if (res.code === 200) {
          this.$alert("相机添加成功", "提示", {
            confirmButtonText: "确定",
            callback: (action) => {
              this.getCompanyList();
              this.ruleForm = {
                wifiName: "",
                address: "",
                // initPoint: "",
                balance:"",
                cameraType: [],
                own: [],
                snCode: "",
                orderSn: "",
                companyId: "",
                childName:""
              }
              this.cameraVisible = false;
              this.refresh()
            },
          });
        } else {
          this.$alert("相机添加失败", "提示", {
            confirmButtonText: "确定",
            callback: (action) => {},
          });
        }
      });
    },
    clearData(){
      this.cameraVisible = false
      this.ruleForm = {
        wifiName: "",
        address: "",
        // initPoint: "",
        balance:"",
        cameraType: [],
        own: [],
        snCode: "",
        orderSn: "",
        companyId: "",
        childName:""
      }
    },
    ownToName(own){
      switch(own){
        case 0:
          return "正常销售"
          break
        case 2:
          return "礼品赠送"
          break
        case 1:
          return "员工自用"
          break
        case 3:
          return "其它"
          break
      }
    },
    typeToName(cameraType){
      switch(cameraType){
        case 4:
          return "四维看看Pro八目相机"
          break
        case 1:
          return "四维看看Lite双目相机"
          break
        case 9:
          return "四维看看双目转台相机"
          break
        case 10:
          return "四维看看激光相机"
          break
        case 6:
          return "第三方相机"
          break
      }
    },
    async getCompanyList() {
      let result = await this.$http.post("/company/listAll");
      this.companyList = result.message;
    },
    handleCurrentChange(val) {
      this.currentPage = val;
    },
    refresh() {
      this.loading = true;
      this.getData();
      this.loading = false;
    },
    // search() {
    //   this.currentPage === 1 ? this.refresh() : (this.currentPage = 1);
    //   this.getData()
    // },
    checkLegal(item) {
      if (item.value) {
        let params = {
          childName: item.value,
        };
        this.$http({
          method: "post",
          data: params,
          url: "/company/checkDevice",
          headers: {
            token: window.localStorage.getItem("zfb_token"),
          },
        }).then((res) => {
          if (res.code === 200) {
            item.isAvailable = true;
          } else {
            item.isAvailable = false;
            this.errMsg = "该ID不可用";
          }
          item.hasCheck = true;
        });
      } else {
        item.isAvailable = false;
        item.hasCheck = true;
        this.errMsg = "ID不能为空";
      }
    },
  },
  mounted() {
    this.getCompanyList();
    console.log("mounted");
    this.refresh();
  },
  watch: {
    currentPage() {
      this.getData();
    },
    // size() {
    //   this.refresh();
    // },
    num(newVal, oldVal) {
      if (newVal > oldVal) {
        this.addDevies.push({
          value: "",
          isAvailable: false,
          hasCheck: false,
        });
      } else {
        this.addDevies.pop();
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.con {
  .time-data {
    position: relative;
    .select-data {
      position: absolute;
      left: 0;
      top: 0;
      opacity: 0;
      cursor: pointer;
    }
    > span {
      color: #0175dc;
    }
  }
  .ei-num {
    .el-input-number {
      width: 90%;
    }
  }
  .clear-music {
    position: relative;
    text-align: right;
    top: -30px;
    color: #999;
    cursor: pointer;
  }
  .musicIcon {
    width: 100%;
    height: 100%;
    line-height: 1;
    margin-top: 35px;
    img {
      width: 50px;
      height: auto;
    }
    p {
      font-weight: bold;
      font-size: 14px;
      color: #000;
      line-height: 20px;
      height: 20px;
      margin-top: 20px;
    }
  }
  .icon-plus {
    margin-left: 15px;
    width: 40px;
    height: 38px;
    line-height: 38px;
    text-align: center;
    background: #f5f7fa;
    color: #999;
    cursor: pointer;
    font-size: 13px;
    display: inline-block;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    &:hover {
      border: 1px solid #c0c4cc;
    }
  }
  .add-num {
    margin-left: 15px;
    width: 250px;
    .icon-close,
    .icon-correct {
      line-height: 1;
      color: #999;
    }
    input[type="number"]::-webkit-inner-spin-button,
    input[type="number"]::-webkit-outer-spin-button {
      -webkit-appearance: none;
      margin: 0;
    }
  }

  .ei-input {
    width: 100%;
    max-height: 200px;
    overflow-y: auto;
    .input-con {
      display: inline-block;
      width: 45%;
      margin: 2px 5px 2px 0;
      height: 60px;
      position: relative;
      .el-input_err {
        & /deep/ .el-input__inner {
          border: 1px solid #f56c6c;
        }
      }
      .el-input_success {
        & /deep/ .el-input__inner {
          border: 1px solid #67c23a;
        }
      }
      span {
        color: #f56c6c;
        font-size: 12px;
        line-height: 1;
        padding-top: 4px;
        position: absolute;
        left: 0;
      }
    }
  }
  .h-header {
    height: 80px;
    background-color: #fff;
    padding-left: 20px;
    box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.1);
    border-radius: 3px;

    div {
      display: inline-block;
    }

    .h-input {
      width: 220px;
    }
  }

  .h-body {
    width: 100%;
    margin: 30px 0 0;
    padding-top: 20px;
    box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.1);
    border-radius: 3px;
    background-color: #fff;

    .logo-add {
      div {
        cursor: pointer;
        line-height: 40px;
        border: 1px dotted #dcdfe6;
        border-radius: 4px;
        font-weight: bold;
        font-size: 18px;
        display: inline-block;
        width: 40px;
        height: 40px;
        background: #f5f7fa;
        position: relative;
        img {
          width: 100%;
          height: 100%;
          position: absolute;
          top: 0;
          left: 0;
        }
        span {
          position: absolute;
          z-index: 100;
          left: 0;
          top: 0;
          width: 100%;
          height: 100%;
        }
      }
    }

    .o-span {
      color: #0175dc;
      cursor: pointer;
    }

    .p-con {
      width: 100%;
      text-align: right;
      padding: 25px 20px 30px;
    }
  }

  .d-table {
    border: 1px solid #ccc;
    .d-con {
      max-height: 200px;
      overflow-y: scroll;
    }
    .d-header {
      font-weight: bold;
    }
    .d-header,
    .d-body {
      height: 40px;
      line-height: 40px;
      width: 100%;
      border-bottom: 1px solid #ccc;
      &:last-child {
        border: none;
      }
      span {
        text-align: center;
        display: inline-block;
        width: 24%;
      }
      .unbind {
        cursor: pointer;
      }
    }
  }
}
</style>