直接上封装的dialog组件代码
<template>
<div>
<el-dialog
title="原片采购详情"
class="Deviceslist_eldialog"
width="978px"
height="534px"
:visible.sync="dialogVisible"
:before-close="detailsCancel"
>
<el-descriptions class="margin-top" :column="5" size="mini" :label-style="{fontWeight:'bold',color:'#333333'}">
<el-descriptions-item
v-for="(eldesc, elindex) in detailroweldescriptions"
:key="elindex"
:label="eldesc.label"
>
{{ eldesc.value }}
</el-descriptions-item>
</el-descriptions>
<el-descriptions :column="5" size="mini" :label-style="{fontWeight:'bold',color:'#333333'}">
<el-descriptions-item label="总数量">{{ totalQuantity }}</el-descriptions-item>
<el-descriptions-item label="总面积">{{ totalArear }}</el-descriptions-item>
<el-descriptions-item label="总金额">{{ totalAmount }}元</el-descriptions-item>
</el-descriptions>
<div class="private_table">
<el-table
:data="tableData"
style="width: 100%;height:528px"
border
height="528px"
class="table-content"
:fit="true"
tooltip-effect="dark"
id="tableId"
@sort-change="sortChange"
>
<!-- @sort-change="sortChange" -->
<el-table-column label="序号" width="60" align="center">
<!-- eslint-disable vue/no-unused-vars -->
<el-table-column label="序号" width="60" align="center">
<template slot="header" slot-scope="scope">
<div>
<span class="table-reload-select" @click="selectSearchReset">重置</span>
</div>
</template>
<template slot-scope="scope">
{{ scope.$index+1 }}
</template>
</el-table-column>
</el-table-column>
<el-table-column
v-for="(tableitem, index) in tablelist"
:key="index"
:prop="tableitem.prop"
:label="tableitem.label"
:type="tableitem.type"
:sortable="tableitem.sortable"
:width="tableitem.width"
:align="tableitem.align"
show-overflow-tooltip
>
<el-table-column
:prop="tableitem.prop"
:label="tableitem.label"
:width="tableitem.width"
:align="tableitem.align"
show-overflow-tooltip
>
<!-- eslint-disable vue/no-unused-vars -->
<template slot="header" slot-scope="scope">
<div v-if="tableitem.keynum === 0 ? true : false" />
<div v-if="tableitem.keynum === 1 ? true : false">
<el-input
v-model="tableitem.search"
size="mini"
placeholder="请输入"
class="inputstyle"
@change="tableitem.findData"
/>
</div>
<div v-if="tableitem.keynum === 2 ? true : false">
<el-select
v-model="tableitem.search"
placeholder="请选择"
clearable
class="inputstyle"
@change="tableitem.findData"
>
<el-option
v-for="item in tableitem.options"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</div>
</template>
</el-table-column>
</el-table-column>
</el-table>
</div>
<span slot="footer" class="dialog-footer">
<el-button type="primary" @click="detailsCancel">确 定</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import { getOriginalFilmDetails } from '@/api/purchasing/yuanpianPurchase'
import { getDictionaryList } from '@/api/basicdata/businessDictionary'
import { getSupplierfileList } from '@/api/basicdata/supplierfile'
export default {
name: 'DetailsDialog',
props: {
detailsVisible: {
type: Boolean,
default: false,
required: true
},
paramtter: {
type: String,
default: '',
required: true
}
},
data() {
const that = this
return {
dialogVisible: false,
detailsId: this.paramtter,
tableData: [],
totalQuantity: '',
totalArear: '',
totalAmount: '',
detailroweldescriptions: [
{
label: '采购单号',
value: '',
props: 'glassPurchaseNo'
},
{
label: '供应商',
value: '',
props: 'supplierInfoName'
},
{
label: '自编号',
value: '',
props: 'selfNo'
},
{
label: '制单人',
value: '',
props: 'creator'
},
{
label: '制单日期',
value: '',
props: 'createTime'
},
{
label: '需到货日期',
value: '',
props: 'aogDate'
},
{
label: '备注',
value: '',
props: 'remark'
}
],
tablelist: [
{
prop: 'glassCategorysName',
label: '品类',
keynum: 2,
search: '',
width: '102px',
findData: function() {
that.mysearch()
},
options: []
},
{
prop: 'thickness',
label: '厚度',
keynum: 1,
search: '',
sortable: 'custom',
width: '102px',
findData: function() {
that.mysearch()
},
options: []
},
{
prop: 'factory',
label: '原片厂家',
keynum: 1,
search: '',
width: '102px',
findData: function() {
that.mysearch()
},
},
{
prop: 'specs',
label: '规格',
keynum: 2,
search: '',
sortable: 'custom',
width: '102px',
findData: function() {
that.mysearch()
},
options: []
},
{
prop: 'glassLevel',
label: '等级',
keynum: 1,
search: '',
width: '102px',
findData: function() {
that.mysearch()
},
},
{
prop: 'color',
label: '颜色/膜系',
keynum: 1,
search: '',
width: '102px',
findData: function() {
that.mysearch()
},
},
{
prop: 'quantity',
label: '单包数量',
keynum: 0,
search: '',
sortable: 'custom',
width: '102px',
},
{
prop: 'boxQuantity',
label: '包数',
keynum: 0,
search: '',
sortable: 'sortable',
width: '102px',
},
{
prop: 'arear',
label: '面积',
keynum: 0,
search: '',
sortable: 'custom',
width: '102px',
},
{
prop: 'amount',
label: '单价',
keynum: 0,
search: '',
sortable: 'custom',
width: '102px',
},
{
prop: 'totalAmount',
label: '金额',
keynum: 0,
search: '',
sortable: 'custom',
width: '102px',
},
{
prop: 'remark',
label: '备注',
keynum: 0,
search: '',
width: '102px',
}
],
}
},
watch: { //监听dialog状态与id并赋值
detailsVisible: {
handler(n, o) {
console.log('watch:', n)
this.dialogVisible = n
console.log(n)
},
deep: true
},
paramtter(id) {
console.log(`父传子id---`, id);
this.detailsId = id
}
},
mounted() {
this.getOptions()
},
methods: {
// 获取表格下拉数据
getOptions() {
const tenantId = sessionStorage.getItem('tenantId')
getDictionaryList({
categoryId: 11,
tenantId,
}).then(res=> { //展示label，参数取value
const supplierInfoNameOptions = res.data.map(el=>({label: el.dictionaryName, value: el.id}))
this.tablelist.forEach(el => {
if (el.prop === 'glassCategorysName') {
el.options = supplierInfoNameOptions
}
return el
})
})
getDictionaryList({
categoryId: 12,
tenantId,
}).then(res=> {
this.tablelist[3].options = res.data.map(el=>({label: el.dictionaryName, value: el.id}))
})
},
//调用接口排序
sortChange({ column, prop, order }) {
console.log(`sort---`, column)
this.sortColumn = order ? prop : undefined
// 正序asc,倒序desc
this.sortEnum = order === 'ascending' ? 'ASC' : order === 'descending' ? 'DESC' : undefined
this.mysearch()
this.currentPage = 1
},
//筛选参数与表格列prop比对，比对成功收取用户输入筛选条件，作为参数请求接口
getSearchItemValue(key) {
const item = this.tablelist.find(el => el.prop === key)
return item.search
},
//获取筛选参数
getParams() {
const params = {
glassCategorysId: this.getSearchItemValue('glassCategorysName'),
thickness: this.getSearchItemValue('thickness'),
factory: this.getSearchItemValue('factory'),
specs: this.getSearchItemValue('specs'),
glassLevel: this.getSearchItemValue('glassLevel'),
color: this.getSearchItemValue('color'),
}
return params
},
// 重置
selectSearchReset() {
this.tablelist.forEach(el => {
el.search = ''
})
this.mysearch()
},
//更新表格数据
mysearch(id) {
// console.log(`numner---id`, id);
const param = this.getParams()
console.log(`params---`, param);
getOriginalFilmDetails(this.detailsId || id, param).then(res => {
this.totalQuantity = res.data.totalQuantity
this.totalArear = res.data.totalArear
this.totalAmount = res.data.totalAmount
this.tableData = res.data.list
Object.keys(res.data).map(vls => {
var n = this.detailroweldescriptions.findIndex(function(item) { return item.props === vls })
if (n !== -1) {
this.detailroweldescriptions[n].value = res.data[vls]
}
})
})
},
//diaolog关闭前的操作
detailsCancel() {
this.dialogVisible = false
this.$emit('detailsHandle', false)
this.tablelist.forEach(el => {
el.search = ''
})
this.mysearch()
}
}
}
</script>
<style lang='scss' scoped>
.private_table{
width: 100%;
height: calc(100% - 50px);
background: #fff;
border-top: 1px solid #323232;
.table-reload-select{
font-size: 14px;
font-family: Microsoft YaHei;
font-weight: 400;
line-height: 0px;
color: #2C68FF;
opacity: 1;
cursor: pointer;
}
.table-content{
border-bottom: 1px solid #323232;
}
.table-reload-select{
font-size: 14px;
font-family: Microsoft YaHei;
font-weight: 400;
line-height: 0px;
color: #2C68FF;
opacity: 1;
cursor: pointer;
}
.table-reload-detail, .table-reload-editor, .table-reload-examine, .table-reload-receipt, .table-reload-delete {
font-size: 14px;
font-family: Microsoft YaHei;
font-weight: 400;
line-height: 0px;
color: #2C68FF;
opacity: 1;
cursor: pointer;
}
.table-reload-examine, .table-reload-receipt{color: #23BCCA;}
.table-reload-delete {color: #F05656;}
.table-reload-line{ color: #E0E0E0; }
//@at-root
}
</style>
<style lang="scss" >
.private_table{
.el-pagination.is-background .el-pager li:not(.disabled).active{
background: #2C68FF;
}
.el-table thead.is-group th {
background: none;
}
.el-table thead.is-group th.el-table__cell{
background: #fff ;
height: 26px !important;
}
.el-table thead tr:nth-child(2) th {
background: rgb(239, 240, 241) !important;
}
.el-table tr{
height: 26px;
}
.el-table .caret-wrapper{
height: 26px;
}
.el-table .sort-caret.ascending{
top: 0.1125rem
}
.el-table .sort-caret.descending{
bottom:0.1375rem;
}
.el-table thead.is-group th {
background: none;
}
.el-table td, .el-table th {
padding: 0;
}
.el-input__icon{
line-height: 0;
}
.el-input--suffix .el-input__inner{
height: 26px;
}
.el-table .el-table__cell {
border: 1px solid #C8C8C8;
border-top: none;
border-right: none;
}
.el-table th.el-table__cell>.cell{
height: 26px;
line-height: 25px;
}
.el-table .el-table__cell:nth-child(1) {
border-left: none !important;
text-align: center;
}
.el-input__inner{
border: none !important;
background: #eff0f1 !important;
}
}
</style>
<style scoped>
/* 鼠标悬停背景色 */
/deep/ .el-table--enable-row-hover .el-table__body tr:hover > td {
background: #D3DEF9;
}
</style>效果图
