wvp/web_src/src/components/setting/SipConfigs.vue

<script>
import handle from "@/until/handle";
import syncChannelProgress from "@components/dialog/SyncChannelProgress.vue";
import BindDevice from "@components/account_com/bindDevice.vue";
import SipConfigEdit from "@components/com/sipConfigEdit.vue";

export default {
  name: "sipConfigs",
  components: {SipConfigEdit, BindDevice, syncChannelProgress},
  data() {
    return {
      configs: [],
      loading: false,
      total: 0,
      page: 1,
      limit: 10,
      showAddConfig: false,
      editConfig: {
        id: null,
        sipDomain: "",
        serverId: "",
        password: "",
        description: "",
        enable: "",
        enableBind: "",
      }
    }
  },
  beforeMount() {
    this.loadConfigs();
  },
  methods: {
    async loadConfigs() {
      this.loading = true;
      let url = "/api/sip/search"
      let [err, res] = await handle(
          this.$axios.get(url)
      )
      this.loading = false;
      if (err || res.data.code != 0) {
        let errStr = err ? err.message : res.data.msg
        console.log(`[搜索sip配置表] ${errStr}`)
        this.$message.error("加载配置失败");
        return;
      }
      // 加载完成
      let response = res.data;
      this.configs = response.data;
      this.total = response.total;
    },

    handleCurrentChange: function (val) {
      this.currentPage = val;
      this.loadConfigs();
    },
    handleSizeChange: function (val) {
      this.count = val;
      this.loadConfigs();
    },
    refreshLoad() {
      this.loadConfigs()
    },
    async executeDeleteConfig(id) {

      if (!id) {
        console.log(`删除sip配置时出现 id 为空的情况`)
        return
      }
      let url = `/api/sip/del?id=${id}`
      this.loading = true;
      let [err, res] = await handle(
          this.$axios.post(url)
      )
      this.loading = false;
      if (err || res.data.code != 0) {
        let errStr = err ? err.message : res.data.msg
        console.log(`[搜索sip配置表] ${errStr}`)
        this.$message.error("加载配置失败");
        return;
      }
      // 加载完成
      let response = res.data;
      this.configs = response.data;
      this.total = response.total;
    },

    copyAtCmd(row) {
      // 生成可用的AT命令
      let atCmd = "AT+CAMPARA=27, "
      // at+campara=27,"3402000000","34020000001320000242","34020000001320000001","12345678"
      atCmd += `"${row.sipDomain}",`
      atCmd += `"设备id",`
      atCmd += `"${row.serverId}",`
      atCmd += `"${row.password}",`
    },

    /**
     * 开启新增配置弹窗
     */
    handleOpenAddConfig() {
      this.executeOpenConfigPop();
    },
    /** 开启编辑弹窗 */
    handleOpenEditConfig(item) {
      this.editConfig = {...item}
      console.log(this.editConfig)
      this.executeOpenConfigPop();
    },
    handleDeleteConfig(item) {
      executeDeleteConfig(item.id);
    },
    executeOpenConfigPop() {
      this.showAddConfig = true;
    },
    /** 关闭配置弹窗 */
    executeCloseConfigPop() {
      this.showAddConfig = false;
      this.editConfig = {};
      this.loadConfigs();
    },
  }
}

</script>

<template>
  <div class="content device-full">
    <!--    设备表格 -->
    <!--设备列表-->
    <div class="round-box search-header">
      <div class="search-info">
        <div class="page-title">sip配置中心</div>
        <div class="page-header-btn">

          <el-button icon="el-icon-plus" size="mini" style="margin-right: 1rem;"
                     type="primary"
                     :loading="loading"
                     @click="handleOpenAddConfig">创建新配置
          </el-button>
          <!--        <el-button icon="el-icon-refresh-right" circle size="mini" :loading="getDeviceListLoading"-->
          <!--                   @click="getDeviceList()"></el-button>-->

          <el-button icon="el-icon-refresh-right" circle size="mini" :loading="loading"
                     @click="refreshLoad()"></el-button>
        </div>
      </div>
    </div>
    <div class="round-box search-ctx mt-2" v-if="total > 0 || loading">
      <el-table class="search-list" :loading="loading" :data="configs" :height="'100%'"
                header-row-class-name="table-header">
        <el-table-column prop="id" label="id" min-width="30">
        </el-table-column>
        <el-table-column prop="sipDomain" label="国标域" min-width="80">
        </el-table-column>
        <el-table-column prop="serverId" label="服务端id" min-width="120">
        </el-table-column>
        <el-table-column prop="password" label="连接密码" min-width="80">
        </el-table-column>
        <el-table-column label="是否启用" min-width="80">
          <template slot-scope="scope">
            <div slot="enable" class="name-wrapper">
              <el-tag size="medium" v-if="scope.row.enable == 1">启用</el-tag>
              <el-tag size="medium" type="info" v-if="scope.row.enable == 0">不启用</el-tag>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="是否为绑定设备" min-width="80">
          <template slot-scope="scope">
            <div slot="enableBind" class="name-wrapper">
              <el-tag size="medium" v-if="scope.row.enableBind == 1">绑定</el-tag>
              <el-tag size="medium" type="info" v-if="scope.row.enableBind == 0">不绑定</el-tag>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="description" label="备注" min-width="160">
        </el-table-column>

        <el-table-column label="操作" min-width="140" fixed="right">
          <template slot-scope="scope">
            <el-button size="medium" icon="el-icon-edit" type="text" @click="handleOpenEditConfig(scope.row)">编辑
            </el-button>
            <el-divider direction="vertical"></el-divider>
            <el-button size="medium" icon="el-icon-delete" type="text" @click="handleDeleteConfig(scope.row)"
                       style="color: #f56c6c">删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
          style="float: right"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page"
          :page-size="limit"
          :page-sizes="[10, 15, 20, 30, 50]"
          layout="total, sizes, prev, pager, next"
          :total="total">
      </el-pagination>
    </div>
    <!--    没有设备提示 -->
    <div class="round-box search-ctx mt-2 " v-else>
      <div class="search-tips">
        <h1>无法找到对应的国标配置</h1>
        <div class="btn-group">
          <el-button @click="refreshLoad">重新加载</el-button>
          <el-button @click="handleOpenAddConfig()">新增国标配置</el-button>
        </div>

      </div>
    </div>

    <!--    绑定新设备-->
    <el-dialog
        :title="editConfig.id!=null?'编辑配置':'新增配置'"
        :close-on-click-modal="false"
        :visible.sync="showAddConfig"
        :destroy-on-close="true"
        @close="executeCloseConfigPop"
    >
      <sip-config-edit
          :config="editConfig"
          @exitPop="executeCloseConfigPop"
      ></sip-config-edit>
    </el-dialog>
  </div>
</template>

<style scoped>
.content {
  width: 100%;
  min-height: 100%;
  position: relative;
  /*top: 110px;*/
  box-sizing: border-box;
  padding: 5px;
  background-color: #a4a4a4;
}

.round-box {
  box-sizing: border-box;
  padding: 5px;
  background-color: #fff;
  border-radius: 3px;
}

.mt-2 {
  margin-top: 5px;
}

.device-full {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 70px);
}

.search-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 35px;
}

.search-ctx {
  width: 100%;
  height: calc(100% - 50px);
  display: flex;
  flex-direction: column;
}

.search-list {
  width: 100%;
  height: calc(100% - 50px);
}

.search-tips {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
</style>