SafetyAlertSystem-ui/src/views/base/edgeDeviceManage/index.vue

<template>
    <!-- 工程管理页面 -->
    <div class="app-container">
        <!-- 表格 -->
        <TableModelTwo
            :isShowHandle="true"
            :formLabel="formLabel"
            :columnsList="columnsList"
            :request-api="queryEdgeDeviceListApiTwo"
            ref="tableRef"
        >
            <template slot="devUserPhone" slot-scope="{ data }">
                {{ phoneCrypto(data.devUserPhone) || '-' }}
            </template>

            <template slot="handle" slot-scope="{ data }">
                <el-button
                    size="mini"
                    @click="handleClick(data)"
                    v-if="data.proType === '2'"
                    >{{ data.bindId ? '修改杆塔' : '绑定杆塔' }}</el-button
                >
            </template>
        </TableModelTwo>

        <!-- 绑定弹框 -->
        <el-dialog
            width="40%"
            title="绑定杆塔"
            v-if="bindVisible"
            :visible.sync="bindVisible"
        >
            <el-form
                label-width="80px"
                ref="bindPowerFormRef"
                :model="bindPowerForm"
                :rules="bindPowerFormRules"
            >
                <el-form-item label="绑定杆塔" prop="powerId">
                    <el-select
                        clearable
                        placeholder="请选择需要绑定的杆塔"
                        v-model="bindPowerForm.powerId"
                    >
                        <el-option
                            v-for="item in powerList"
                            :key="item.powerId"
                            :label="item.powerName"
                            :value="item.powerId"
                        />
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button size="mini" type="primary" @click="onSubmit"
                        >确 定</el-button
                    >
                    <el-button size="mini" @click="onCancel">取 消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>

<script>
import { formLabel, columnsList } from './config'
import { commonMixin } from '../mixins/common'
import {
    getPowerListApi,
    putPowerDataApi,
    queryEdgeDeviceListApiTwo,
} from '@/api/base/edgeDevice'
export default {
    name: 'EdgeDevice',
    methods: {
        async handleClick(row) {
            if (row.bindId) {
                this.bindPowerForm.powerId = row.bindId
            } else {
                this.bindPowerForm.powerId = ''
            }
            const { id } = row
            this.bindPowerForm.id = id
            const res = await getPowerListApi({ id })
            this.powerList = res.rows
            this.bindVisible = true
        },

        /* 确定 */
        onSubmit() {
            this.$refs.bindPowerFormRef.validate(async (valid) => {
                if (valid) {
                    const res = await putPowerDataApi(this.bindPowerForm)
                    if (res.code === 200) {
                        this.$message.success('绑定成功！')
                        this.bindVisible = false
                        this.$refs.tableRef.getTableList()
                    }
                }
            })
        },
        /* 取消 */
        onCancel() {
            this.bindVisible = false
        },
    },

    mixins: [commonMixin],
    components: {},
    created() {},
    data() {
        return {
            // 搜索区表单配置项
            formLabel,
            // // 表格导出id列表
            // exportList: [],
            // 列表区配置项
            columnsList,
            powerList: [], // 杆塔数据源
            bindVisible: false,
            queryEdgeDeviceListApiTwo,
            bindPowerForm: {
                powerId: '',
                id: '',
            },

            bindPowerFormRules: {
                powerId: [
                    {
                        required: true,
                        message: '请选择需要绑定的杆塔',
                        trigger: 'change',
                    },
                ],
            },
            // 弹框区配置项
        }
    },
}
</script>