dvcp_v2_webapp/packages/device/AppEquipmentManage/components/List.vue

<template>
  <section class="AppPetitionManage">
    <ai-list>
      <ai-title slot="title" title="广播设备管理" isShowBottomBorder/>
      <template #content>
        <ai-search-bar bottomBorder>
          <template slot="right">
            <el-input v-model="search.name" size="small" placeholder="设备名称/设备编号" clearable
                      v-throttle="() => {page.current = 1, getList()}"
                      @clear=";(page.current = 1), (search.name = ''), getList()" suffix-icon="iconfont iconSearch"/>
          </template>
        </ai-search-bar>
        <ai-search-bar class="ai-search-ba mar-t10">
          <template slot="left">
            <!-- <el-button icon="iconfont" type="primary" size="small">数据同步</el-button> -->
            <!-- <el-button icon="iconfont iconDelete" size="small" @click="removeAll" :disabled="ids.length == 0">删除 </el-button> -->
          </template>
        </ai-search-bar>
        <ai-table :tableData="tableData" :col-configs="colConfigs" :total="total" ref="aitableex"
                  :current.sync="page.current" :size.sync="page.size" @getList="getList"
                  @selection-change="(v) => (ids = v.map((e) => e.id))">
          <el-table-column slot="options" label="操作" align="center" width="280" fixed="right">
            <template slot-scope="{ row }">
              <!-- <el-button type="text" @click="close(row.id)">停播</el-button> -->
              <el-button type="text" @click="toTaskList(row.deviceId)">任务列表</el-button>
              <el-button type="text" @click="bind(row)" >绑定行政区划</el-button>
              <!-- <el-button type="text" @click="locate=true">地图标绘</el-button>-->
            </template>
          </el-table-column>
        </ai-table>
      </template>
    </ai-list>
    <el-dialog
        title="绑定行政区划"
        :visible.sync="bindVisible"
        width="800px">
      <ai-area-get :instance="instance" v-model="areaId" :root="user.info.areaId" @select="handleAreaSelect"/>
      <span slot="footer" class="dialog-footer">
        <el-button @click="bindVisible = false">取 消</el-button>
        <el-button type="primary" @click="bindArea">确 定</el-button>
      </span>
    </el-dialog>
    <locate-dialog v-model="locate" :ins="instance" @confirm="bindLocate"/>
  </section>
</template>

<script>
import {mapState} from 'vuex'
import LocateDialog from "../../monitor/components/locateDialog";

export default {
  name: 'List',
  components: {LocateDialog},
  props: {
    dict: Object,
    instance: Function,
    params: Object,
  },

  data() {
    return {
      isAdd: false,
      page: {
        current: 1,
        size: 10,
      },
      total: 0,
      search: {
        name: '',
      },
      id: '',
      ids: [],
      colConfigs: [
        {
          prop: 'name',
          label: '设备名称',
          width: '200',
        },
        {
          prop: 'areaName',
          label: '所属行政区划',
          align: 'center',
          width: '200',
        },
        {
          prop: 'serialNo',
          label: '设备编号',
          align: 'center',
        },
        {
          prop: 'devStatus',
          label: '设备状态',
          width: '200',
          align: 'center',
          render: (h, {row}) => {
            return h('span', null, this.dict.getLabel('dlbDevStatus', row.devStatus))
          },
        },
        {
          prop: 'bind',
          label: '是否绑定区划',
          align: 'center',
          render: (h, {row}) => {
            return h('span', null, (row.areaId? '是': '否'))
          },
        },
        {
          slot: 'options',
          label: '操作',
          align: 'center',
        },
      ],
      tableData: [],
      areaId: '',
      bindVisible: false,
      changeInfo: {},
      locate: false
    }
  },

  computed: {
    ...mapState(['user']),
  },

  created () {
    this.dict.load('dlbDevStatus', 'yesOrNo').then(() => {
      this.getList()
    })
  },

  methods: {
    bind(item) {
      this.areaId = ''
      this.changeInfo = item
      this.bindVisible = true
    },
    handleAreaSelect(v) {
      this.changeInfo.areaName = v?.[0]?.label
    },
    bindArea() {
      if (!this.areaId) {
        return this.$message.error('请先选择行政区划')
      }
      this.changeInfo.areaId = this.areaId
      this.instance.post(`/app/appdlbquipment/addOrUpdate`, this.changeInfo).then((res) => {
        if (res.code == 0) {
          this.$message.success('绑定行政区划成功！')
          this.bindVisible = false
          this.getList()
        }
      })
    },
    bindLocate(locate) {
      if (locate) {
        let {lat, lng} = locate.location, {changeInfo} = this
        this.instance.post("/app/appdlbquipment/addOrUpdate", {
          ...changeInfo, lat, lng
        }).then(res => {
          if (res?.code == 0) {
            this.$message.success("地图标绘成功!")
            this.locate = true
            this.getList()
          }
        })
      }
    },
    close(id) {
      this.$confirm('确定停播该设备?').then(() => {
        this.instance.post(`/app/appdlbquipment/stop?deviceId=${id}`).then((res) => {
          if (res.code == 0) {
            this.$message.success('停播成功！')
            this.getList()
          }
        })
      })
    },
    getList() {
      this.instance.post(`/app/appdlbquipment/list`, null, {
        params: {
          ...this.page,
          ...this.search,
        },
      })
      .then((res) => {
        if (res.code == 0) {
          this.tableData = res.data.records
          this.total = parseInt(res.data.total)
        }
      })
    },

    toTaskList(id) {
      this.$emit('change', {
        type: 'taskList',
        params: {
          id: id || '',
          // areaId: this.areaId,
        },
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.AppPetitionManage {
  height: 100%;

  .mar-t10 {
    margin-top: 10px;
  }
}
</style>