erp-el-element/commontable/tabledialog/LightingDialog.vue

115 lines
3.2 KiB
Vue

<template>
<div class="dilog">
<el-dialog
width="40%"
title="亮灯提示"
:visible.sync="Redlightvisible"
:before-close="close"
>
<el-table
:data="RedlightData"
height="300px"
@selection-change="handleSelectionChange"
header-cell-class-name="Redlight"
ref="multipleTable"
>
<el-table-column type="selection" width="55" :selectable="selectable">
</el-table-column>
<el-table-column property="imei1" label="IMEI/SN" width="150">
<template slot-scope="{ row }">
<span>
{{ row.imei1 || row.imei2 || row.sn }}
</span>
</template>
</el-table-column>
<el-table-column property="model_info" label="机器信息" width="280">
<template slot-scope="{ row }">
<span style="display: felx; align-items: center">
<el-popover placement="right" width="350" trigger="click">
<img
v-if="!!row['img'] || row['goods_img']"
style="height: 350px"
:src="row['img'] || row['goods_img']"
/>
<img
v-if="!!row['img'] || row['goods_img']"
slot="reference"
style="float: left; height: 50px"
:src="row['img'] || row['goods_img']"
/>
</el-popover>
{{
row["brand_name"] +
row["model_name"] +
+row["rom_name"] +
row["color_name"] || row["machine_name"]
}}
</span>
</template>
</el-table-column>
<el-table-column property="status" label="亮灯状态">
<template slot-scope="{ row }">
<span>
{{ row.tipsStatus == 0 ? "不在货架" : "成功" }}
</span>
</template>
</el-table-column>
</el-table>
<div slot="footer" class="dialog-footer">
<el-button type="warning" @click="closeLight">关灯</el-button>
<el-button @click="quzou">已取走</el-button>
<el-button type="primary" @click="close"> </el-button>
</div>
</el-dialog>
</div>
</template>
<script>
export default {
props: ["Redlightvisible", "RedlightData"],
data() {
return {
gridDataList: [],
};
},
methods: {
close() {
this.$emit("Batchdialogclose");
},
//关灯
closeLight() {
this.$emit("tipCloseLight", this.gridDataList);
},
//取走
quzou() {
this.$emit("tipCloseLight", this.gridDataList, 1);
},
//选中事件
handleSelectionChange(e) {
this.gridDataList = e;
},
selectable(row, rowIndex) {
if (row.tipsStatus == 0) {
this.Redlight();
} else {
return true;
}
},
//清空选中状态
clearCheckboxRow() {
this.$refs.multipleTable.clearSelection();
},
Redlight() {
return "Redlight";
},
},
};
</script>
<style scoped lang='scss'>
::v-deep .el-table .Redlight .cell .el-checkbox__inner {
//找到表头那一行,然后把里面的复选框隐藏掉
display: none !important;
}
</style>