cessdad

<template>

    <div class="peoject_wrap">

        <el-container>

            <el-header>

                <div class="top">

                    <div class="customer">

                        {{ data.name }}

                    </div>

                    <div class="equipment_code">

                        {{ data.emmcid }}

                    </div>

                </div>

            </el-header>

            <el-main class="table">

                <el-table class="ScreenTable" :data="data.ui" @selection-change="selectAdCount" ref="countTableRef"

                    :row-style="hack" @row-click="myclick" :header-cell-class-name="cellClass"

                    style="width: 100%; font-size: 14px; " height="78vh">

                    <el-table-column prop="name" label="ui名称" align="center" />

                    <el-table-column prop="image" label="图片" align="center">

                        <template #default="scope">

                            <img @click="queryImg(scope.row.small_pic_url)" :src="scope.row.small_pic_url"

                                min-width="70" width="70" height="70" />

                        </template>

                    </el-table-column>

                    <el-table-column type="selection" width="70" align="center" />

                    <el-table-column label="默认UI" align="center" :selectable="checkSelect">

                        <template #default="scope">

                            <el-radio v-if="default_ui.ui.includes(scope.row.id)" class="radio" :label="scope.$index"

                                v-model="radio" @click="radioClick(scope.row.id)">&nbsp;</el-radio>

                        </template>

                    </el-table-column>

                </el-table>

                <el-image-viewer v-if="showImg" @close="close" :url-list="[data.img]" />

            </el-main>

            <el-footer>

                <div class="footer"> <el-button style="width: 70px; height: 36px;" type="primary"

                        @click="save">确定</el-button></div>

            </el-footer>

        </el-container>

    </div>

</template>

<script setup>

import { reactive, ref, onMounted } from 'vue'

import { queryUiApi, saveRedisApi } from '@/utls/uiRequest';

import { useRouter } from 'vue-router';

import { ElMessageBox, ElMessage } from 'element-plus'

const router = useRouter();

const showImg = ref(false)

const countTableRef = ref();

const radio = ref('');

const selectAdCountArr = ref([]); //选中推送账户的数组

const data = reactive({

    ui: [],

    id: "",

    name: "",

    emmcid: "",

    uiId: '',

    img: "",

    uiCount: 3,

    default_ui: ''

})

const default_ui = reactive({

    ui: [],

    OneUi:''

})

const uiList = reactive({

    uiId: [],

})

// const queryUi = () => {

//     let uid = {

//         uid: data.id

//     }

//     queryUiApi(uid).then(res => {

//         if (res != null && res != undefined) {

//             if (res.success) {

//                 data.ui = res.data

//             }

//             if(res.code===20006){

//                 router.push({

//                     path: "/hint"

//                 })

//             }

//         }

//     })

// }

const queryUi = () => {

    queryUiApi().then(res => {

        if (res != null && res != undefined) {

            if (res.success) {

                data.ui = res.data.nwdUiProjectMobiles

                if (res.data.uiMobileCount != undefined) {

                    data.uiCount = res.data.uiMobileCount

                }

            }

            if (res.code === 20006) {

                router.push({

                    path: "/hint"

                })

            }

        }

    })

}

const save = () => {

    if (data.uiId == '') {

        ElMessageBox.alert(

            'UI不能为空，请选择所需要的UI',

            {

                confirmButtonText: '确定',

            }

        )

        return

    }

    if(default_ui.OneUi!=''){

        if(default_ui.ui.includes(default_ui.OneUi) && data.default_ui === ''){

            data.default_ui=default_ui.OneUi

        }

    }

    if (data.default_ui == '') {

        ElMessageBox.alert(

            '默认UI不能为空，请选择所需要的默认UI',

            {

                confirmButtonText: '确定',

            }

        )

        return

    }

    let uiId = {

        uiId: data.uiId,

        default_ui: data.default_ui

    }

    saveRedisApi(uiId).then(res => {

        if (res != null && res != undefined) {

            if (res.success) {

                ElMessage({

                    type: 'success',

                    message: '提交成功',

                })

                router.push({

                    path: "/success"

                })

                return

            }

        }

        ElMessage({

            type: 'error',

            message: '服务繁忙,请稍后再试！',

        })

    })

}

onMounted(() => {

    let ui = localStorage.getItem("ui")

    if (ui != 'null' && ui != undefined && ui != '') {

        try {

            const token = localStorage.getItem("token")

            let resdata = token.substring(8, token.length)

            let Base64 = require('js-base64').Base64

            let result = JSON.parse(Base64.decode(resdata))

            data.id = result.id

            data.name = result.name

            data.emmcid = result.emmcid

            data.ui = JSON.parse(ui)

            localStorage.removeItem("ui")

        } catch (e) {

            router.push({

                path: "/past"

            })

            return

        }

    } else {

        try {

            const token = localStorage.getItem("token")

            let resdata = token.substring(8, token.length)

            let Base64 = require('js-base64').Base64

            let result = JSON.parse(Base64.decode(resdata))

            data.id = result.id

            data.name = result.name

            data.emmcid = result.emmcid

            queryUi()

        } catch (e) {

            router.push({

                path: "/past"

            })

            return

        }

    }

})

const close = () => {

    showImg.value = false

}

const queryImg = (res) => {

    data.img = res

    showImg.value = true

}

const selectAdCount = (value) => {

    // let a=uiList.uiId.indexOf(3+"")

    // console.log(a)

    // // uiList.uiId.value=[]

    // console.log(value)

    let id = ''

    let default_list = []

    for (var i = 0; i < value.length; i++) {

        id = id + value[i].id + ","

        default_list.push(value[i].id)

        if (radio.value === '') {

            radio.value = uiList.uiId.indexOf(value[i].id + "")

            default_ui.OneUi = value[i].id

        }

    }

    data.uiId = id

    default_ui.ui = default_list

    if (value.length > data.uiCount) {

        let del_row = value.shift();

        countTableRef.value.toggleRowSelection(del_row, false);

        selectAdCountArr.value = value;

    } else {

        selectAdCountArr.value = value;

    }

    uiList.uiId = []

}

const cellClass = (row) => {

    if (row.columnIndex === 2) {

        return 'addAllSelectClass'

    }

}

const checkSelect = (row, index) => {

    let isChecked = true;

    if (row.dealerName === null) {

        isChecked = true

    } else {

        isChecked = false

    }

    return isChecked

}

const radioClick = (res) => {

    data.default_ui = res

}

const hack = ({ row, rowIndex }) => {

    uiList.uiId.push(row.id)

}

// const myclick=(row, column, event)=>{

//   console.log(row.index)

// }

 

</script>

<style lang="less" scoped>

.top {

    margin-top: 2vh;

    .equipment_code {

        margin-top: 1vh;

    }

}

.footer {

    width: 100%;

    height: 50px;

    line-height: 50px;

    position: fixed;

    bottom: 2vh;

    left: 0;

}

/deep/ .el-checkbox__inner {

    border-radius: 50%; //对边框进行调整

}

//去除复选框头部

::v-deep .el-table__header-wrapper {

    .el-checkbox__inner {

        display: none;

    }

}

 

//添加全选样式

::v-deep .el-table .addAllSelectClass .cell::before {

    content: '选择UI';

    text-align: center;

}

</style>