admin-fiveFollowing/src/views/siteManage/variableList/index.vue

<template>
  <div class="siteManage-main variableList">
    <!-- 筛选start -->
    <div class="filter-container mb-20">
      <div class="left">
        <div>
          <a class="" style="margin-right: 30px">【测试站点1】站点的所有变量</a>
          <el-button icon="el-icon-plus" type="success" @click="addItem()">
            新增
          </el-button>
          <el-button icon="el-icon-refresh" type="primary">
            同步配置到采集器
          </el-button>
        </div>

        <div style="margin-top: 20px">
          <el-button @click="Select(1)" :type="select == 1 ? 'primary' : ''">
            模拟量
          </el-button>
          <el-button @click="Select(2)" :type="select == 2 ? 'primary' : ''">
            状态量
          </el-button>
          <el-button @click="Select(3)" :type="select == 3 ? 'primary' : ''">
            参数量
          </el-button>
          <el-input
            placeholder="搜索变量名称"
            style="width: 200px; margin-left: 20px"
            v-model="variableName"
          ></el-input>
          <el-button
            type="primary"
            icon="el-icon-search"
            class="search-button"
            @click="query()"
          >
            搜索
          </el-button>
        </div>
        <!-- <el-radio-group v-model="tabPosition" style="margin-top: 20px">
          <el-radio-button label="one">模拟量</el-radio-button>
          <el-radio-button label="two">状态量</el-radio-button>
          <el-radio-button label="three">参数量</el-radio-button>
        </el-radio-group> -->
      </div>

      <div class="right">
        <el-button type="primary">导入</el-button>
        <el-button type="primary">导出</el-button>
      </div>
    </div>
    <!-- 筛选end -->

    <!-- 表格start -->
    <el-table
      :data="tableData"
      border
      stripe
      :header-cell-style="headClass"
      :default-sort="{ prop: 'date', order: 'descending' }"
    >
      <el-table-column
        type="index"
        label="序号"
        width=""
        sortable
      ></el-table-column>
      <el-table-column
        prop="variableName"
        label="变量名"
        width=""
        sortable
      ></el-table-column>
      <el-table-column
        prop="variableCoding"
        label="变量编号"
        width=""
        sortable
      ></el-table-column>
      <el-table-column
        prop="monitorDeviceName"
        label="监控设备"
        width=""
      ></el-table-column>
      <el-table-column
        prop="deviceName"
        label="通信设备"
        width=""
      ></el-table-column>
      <el-table-column
        prop="dataAddress"
        label="数据地址"
        width=""
      ></el-table-column>
      <el-table-column
        prop="dataType"
        label="数据类型"
        width=""
      ></el-table-column>
      <el-table-column
        prop="coefficient"
        label="系数"
        width=""
      ></el-table-column>
      <el-table-column
        prop="saveCycle"
        label="存盘周期"
        width=""
      ></el-table-column>
      <el-table-column fixed="right" label="操作" width="180">
        <template #default="scope">
          <el-button
            type="text"
            size="small"
            @click.prevent="editRow(scope.row)"
          >
            修改
          </el-button>
          <el-popconfirm
            confirm-button-text="是"
            cancel-button-text="否"
            icon="el-icon-info"
            icon-color="red"
            title="确定删除?"
            @confirm="handleDelete(scope.row)"
            @cancel="cancelEvent"
          >
            <template #reference>
              <el-button type="text" size="small" class="delete-text">
                删除
              </el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <!-- 表格end -->

    <!-- 分页start -->
    <div class="paginationBlock">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[15, 20, 25, 30]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        
      ></el-pagination>
    </div>
    <!-- 分页end -->

    <!--弹框组件开始-----------------------start-->
    <dialog-component
      :dialogTitle="dialogTitle"
      :itemInfo="tableItem"
      @closeDialog="closeDialog"
      :flag="showDialog"
      :siteId="siteId"
    ></dialog-component>
    <!--弹框组件开始-----------------------end-->
  </div>
</template>

<script>
import DialogComponent from './dialogComponent'
import * as api from '@/api/siteManage/variableList'
import { defineComponent, onMounted, reactive, ref, watch } from 'vue'
import { ElMessage } from 'element-plus'

export default defineComponent({
  name: 'VariableList',
  props: {
    siteId: Number,
  },

  components: { DialogComponent },

  setup(props) {
    const tableItem = reactive([])
    const tableData = ref()
    const currentPage = ref(1)
    const pageSize = ref(15)
    const total = ref(0)
    const select = ref(1)
    // const siteId = ref(1)
    const variableName = ref('')
    const showDialog = ref(false)
    const dialogTitle = ref('')

    //是否删除  ---- 否
    const cancelEvent = () => {
      console.log('cancel!')
    }
    //查询变量列表
    function query() {
      api
        .variableList({
          size: pageSize.value,
          current: currentPage.value,
          dataArea: select.value,
          siteId: props.siteId,
          variableName: variableName.value,
        })
        .then((requset) => {
          if (requset.status === 'SUCCESS') {
            tableData.value = requset.data.records
            total.value = requset.data.total
          } else {
            ElMessage.error(requset.msg)
          }
        })
    }

    const Select = (value) => {
      select.value = value
      query()
    }

    //监听变化
    watch(
      () => props.siteId,
      (newVal) => {
        console.log('newVal')
        console.log(newVal)
        query()
      }
    )

    onMounted(() => {
      query()
    })

    const handleSizeChange = (val) => {
      console.log(`每页 ${val} 条`)
    }
    const handleCurrentChange = (val) => {
      console.log(`当前页: ${val}`)
    }

    // input输入框无法输入解决
    const change = () => {
      this.$forceUpdate()
    }

    // 表头样式设置
    const goVariableList = () => {
      // 跳转至订单列表页面传参
      this.$router.push({
        path: '../siteManage/variableList/index.vue',
      })
      // this.$router.push({ name:'variableList'})
    }
    const headClass = () => {
      return 'background:#FAFAFA;'
    }

    // 添加操作
    const addItem = () => {
      tableItem.value = {
        // dataArea:'1'
      }
      dialogTitle.value = '新增'
      showDialog.value = true
    }
    // 编辑操作
    const editRow = (row) => {
      // tableItem.value = {
      //   dataArea: row.dataArea.toString(),
      //   monitoringEquipment: row.monitoringEquipment,
      //   communicationEquipment: row.communicationEquipment,
       
      // }

      tableItem.value = row
      tableItem.value.dataArea = row.dataArea.toString()
      tableItem.value.monitoringEquipment = row.monitoringEquipment
      tableItem.value.communicationEquipment =
        row.communicationEquipment
      dialogTitle.value = '编辑'
      showDialog.value = true
    }
    
    // 关闭操作
    const closeDialog = () => {
      showDialog.value = false
      query()
    }


    //删除操作
    const handleDelete = (row) => {
       api.variableListDel({ id: row.id }).then((requset) => {
        if (requset.status === 'SUCCESS') {
          ElMessage.success({
            message: '删除成功',
            type: 'success',
          })
          query()
        } else {
          ElMessage.error(requset.msg)
        }
      })


    }
    // 获取数据
    const getVariableListone = () => {
      console.log('hzy')
    }

    return {
      cancelEvent,
      handleSizeChange,
      handleCurrentChange,
      change,
      goVariableList,
      headClass,
      addItem,
      editRow,
      closeDialog,
      handleDelete,
      getVariableListone,
      query,
      Select,

      select,
      showDialog,
      dialogTitle,
      total,
      pageSize,
      currentPage,
      tableData,
      input: '请输入状态',
      variableName,
      tableItem,
    }
  },
})
</script>

<style lang="scss" scoped>
</style>