industry-data-platform/industry-admin/src/views/mobile/userItemSetting/index.vue

<template>
  <div class="sy-content">
    <el-row>
      <el-col>
        <!-- 操作按钮 -->
        <el-row class="czBtns" style="float:right">
          <el-col :span="1.5">
            <el-button type="primary" icon="el-icon-plus" size="small"
              @click="addUserItemsEvent">新增</el-button>
          </el-col>
        </el-row>
        <!-- 数据组表格信息 -->
        <CommonTable ref="userItemsTable" :tableHeaderTitle="tableHeaderTitle" :tableData="tableData"
          :isShowCheckbox="isShowCheckbox" :isShowIndex="isShowIndex" :tableHight="tableHight"
          :tableOperate="tableOperate" @updateUserItemsEvent="updateUserItemsEvent"
          @delUserItemsEvent="delUserItemsEvent">
        </CommonTable>
        <!-- 分页信息 -->
        <pagination v-show="tableTotal > 0" :total="tableTotal" :page.sync="queryParams.page"
          :limit.sync="queryParams.limit" align="right" @pagination="queryUserItems" />
      </el-col>
    </el-row>

    <!-- 用户组，新增修改详情界面 -->
    <UserItems ref="userItems" @queryUserItems="queryUserItems"></UserItems>
  </div>
</template>

<script>
import CommonTable from '@/components/CommonTable/index.vue'
import UserItems from './userForm'
import {queryUserItems, delUserItemsById} from "@/api/mobile/useritems"
import { showConfirmWin } from '@/utils/cqcy'

export default {
  name: 'index',
  components: {
    CommonTable,
    UserItems
  },
  data() {
    return {
      //表格参数
      isShowCheckbox: false,
      isShowIndex: true,
      tableHight: '68vh',
      tableHeaderTitle: [
        {
          propName: "userName",
          labelName: "用户名",
          align: "left"
        },
        {
          propName: "itemListTitle",
          labelName: "点位名称",
          align: "left"
        },
        {
          propName: "remark",
          labelName: "备注",
          align: "left"
        },


      ],
      tableData: [],
      tableOperate: [
        {
          btnName: '修改',
          size: "mini",
          style: '',
          icon: 'el-icon-edit',
          methodName: "updateUserItemsEvent",
        },
        {
          btnName: '删除',
          size: "mini",
          style: 'color: red;',
          icon: 'el-icon-delete',
          methodName: "delUserItemsEvent",
        }
      ],
      queryParams: {
        page: 1,
        limit: 10,
      },
      tableTotal: 0
    }
  },
  created() {
    this.queryUserItems()
  },
  methods: {
    /** 分页获取用户组 */
    queryUserItems() {
      queryUserItems(this.queryParams).then(res => {
        if (!res || !res.data) {
          this.$message({
            message: '数据查询失败！',
            type: 'warning'
          })
          return
        }
        this.tableTotal = res.data.count
        this.tableData = res.data.userItems
      })
    },
    /** 新增用户组事件 */
    addUserItemsEvent() {
      this.$refs.userItems.userItemsForm.id = null
      this.$refs.userItems.userItemsForm.userId = ''
      this.$refs.userItems.userItemsForm.userName = ''
      this.$refs.userItems.userItemsForm.itemList = ''
      this.$refs.userItems.userItemsForm.itemListTitle = ''
      this.$refs.userItems.userItemsForm.idList = []
      this.$refs.userItems.title = '新增用户报警点位'
      this.$refs.userItems.visible = true
    },
    /** 修改用户组事件 */
    updateUserItemsEvent(row) {
      this.$refs.userItems.userItemsForm.id = row.id
      this.$refs.userItems.title = '修改用户报警点位'
      this.$refs.userItems.visible = true
    },
    /** 删除用户报警点位配置事件 */
    delUserItemsEvent(row) {
      showConfirmWin(this, null, '您确定要删除该用户报警点位配置吗？', () => {
        this.delUserItemsById(row.id);
      })
    },
    delUserItemsById(id){
      delUserItemsById(id).then(res => {
        if (!res || !res.data) {
          this.$message({
            message: '删除用户报警点位配置失败！',
            type: 'warning'
          })
          return
        }
        this.$message({
          message: '删除用户报警点位配置成功！',
          type: 'success'
        })
        this.queryUserItems()
      })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss"></style>