<template>
|
<div class="page-view">
|
<div class="top-box">
|
<div class="table-box" :style="{ width: detailEnter ? '95%' : '100%' }">
|
<el-form ref="form" :model="tableList" :show-message="false" label-position="right">
|
<el-table
|
ref="fromTable"
|
:data="tableList.tableData"
|
style="width: 100%"
|
@selection-change="handleSelectionChange"
|
:row-key="(row) => row.productId"
|
:header-cell-style="{ background: '#f1f3f8', color: '#000009', 'font-size': '14px' }"
|
border
|
>
|
<el-table-column v-if="selectBox" type="selection" :reserve-selection="true" width="40" align="center">
|
</el-table-column>
|
<el-table-column
|
v-if="tableList.isReturn"
|
type="index"
|
label="#"
|
width="50"
|
align="center"
|
></el-table-column>
|
<el-table-column
|
v-for="(item, i) in tableList.tableColumn"
|
:key="i"
|
:prop="item.prop"
|
:label="item.label"
|
:width="item.width"
|
:min-width="item.min"
|
align="center"
|
>
|
<!-- 表头样式 -->
|
<template slot="header">
|
<span v-if="item.isRequird" style="color: #f56c6c">*</span>
|
<div v-else-if="item.addColumn" class="add-column-box">
|
<el-input
|
placeholder="请输入"
|
v-model="item.label"
|
size="mini"
|
clearable
|
@change="
|
(val) => {
|
addColumnInputChange(val, item.prop)
|
}
|
"
|
></el-input>
|
<div class="common-select-btn" @click="clearupColumn(item.prop)">
|
<i class="el-icon-remove" title="删除"></i>
|
</div>
|
</div>
|
<span v-else>{{ item.label }}</span>
|
<span v-if="item.iconRight">
|
<i
|
@click="settingClick(item)"
|
:class="item.iconRight"
|
style="font-size: 16px ;color:#5582F3; margin-left: 5px; cursor: pointer"
|
></i>
|
</span>
|
</template>
|
<!-- column样式 -->
|
<template slot-scope="scope">
|
<template v-if="detailEnter">
|
<el-form-item
|
v-if="item.input"
|
label=" "
|
:prop="'tableData.' + scope.$index + '.' + item.prop"
|
:rules="[{ required: item.isRequird ? true : false, message: '输入不能为空' }]"
|
>
|
<el-input
|
v-model.trim="scope.row[item.prop]"
|
maxlength="50"
|
size="mini"
|
:disabled="!isOperate"
|
@change="
|
(val) => {
|
commonInputChange(val, item.prop, scope.row, scope)
|
}
|
"
|
></el-input>
|
</el-form-item>
|
<el-form-item
|
v-else-if="item.workshop"
|
label=" "
|
:prop="'tableData.' + scope.$index + '.' + item.prop"
|
>
|
<div class="custom-name">
|
<el-select v-model="scope.row[item.prop]" clearable size="mini" placeholder="请选择">
|
<el-option
|
v-for="(item, index) in workshopList"
|
:key="index"
|
:label="item.name"
|
:value="item.ID"
|
>
|
</el-option>
|
</el-select>
|
<div class="common-select-btn" @click="clearupClient(scope)">
|
<i class="el-icon-remove" title="删除"></i>
|
</div>
|
</div>
|
</el-form-item>
|
<el-form-item
|
v-else-if="item.carFlag"
|
label=" "
|
:prop="'tableData.' + scope.$index + '.' + item.prop"
|
>
|
<div class="custom-name">
|
<el-select v-model="scope.row[item.prop]" clearable size="mini" placeholder="请选择">
|
<el-option
|
v-for="(item, index) in carFlagList"
|
:key="index"
|
:label="item.name"
|
:value="item.id"
|
>
|
</el-option>
|
</el-select>
|
<div class="common-select-btn" @click="clearupClient(scope)">
|
<i class="el-icon-remove" title="删除"></i>
|
</div>
|
</div>
|
</el-form-item>
|
<el-form-item
|
v-else-if="item.inputNumber"
|
label=" "
|
:prop="'tableData.' + scope.$index + '.' + item.prop"
|
:rules="[{ required: item.isRequird ? true : false, message: '输入不能为空' }]"
|
>
|
<el-input-number
|
v-model="scope.row[item.prop]"
|
placeholder=""
|
:min="0"
|
:controls="false"
|
:disabled="!isOperate"
|
size="mini"
|
style="width: 100%; margin-right: 5px"
|
@change="
|
(val) => {
|
commonInputChange(val, item.prop, scope.row, scope)
|
}
|
"
|
></el-input-number>
|
</el-form-item>
|
<el-form-item
|
v-else-if="item.inputFloat"
|
label=" "
|
:prop="'tableData.' + scope.$index + '.' + item.prop"
|
:rules="[{ required: item.isRequird ? true : false, message: '输入不能为空' }]"
|
>
|
<el-input-number
|
v-model="scope.row[item.prop]"
|
placeholder=""
|
:min="0"
|
:disabled="!isOperate"
|
:controls="false"
|
size="mini"
|
style="width: 100%; margin-right: 5px"
|
@change="
|
(val) => {
|
commonInputChange(val, item.prop, scope.row, scope)
|
}
|
"
|
></el-input-number>
|
</el-form-item>
|
<el-form-item
|
v-else-if="item.showInput"
|
label=" "
|
:prop="'tableData.' + scope.$index + '.' + item.prop"
|
:rules="[{ required: item.isRequird ? true : false, message: '输入不能为空' }]"
|
>
|
<el-input
|
v-model="scope.row[item.prop]"
|
placeholder=""
|
size="mini"
|
style="width: 100%; margin-right: 5px"
|
></el-input>
|
</el-form-item>
|
<!-- 调用方法显示文字 -->
|
<div v-else-if="item.isCallMethod">
|
<span :class="item.isClass ? item.getClassName(scope.row[item.prop], scope.row) : ''">{{
|
item.getCallMethod(scope.row[item.prop], scope.row)
|
}}</span>
|
</div>
|
<span v-else>
|
<template>
|
{{ scope.row[item.prop] }}
|
</template>
|
</span>
|
</template>
|
<el-form-item
|
v-else-if="item.inputNumber && selectBox"
|
label=" "
|
:prop="'tableData.' + scope.$index + '.' + item.prop"
|
:rules="[{ required: item.isRequird ? true : false, message: '输入不能为空' }]"
|
>
|
<el-input-number
|
v-model="scope.row[item.prop]"
|
placeholder=""
|
:min="0"
|
:controls="false"
|
:disabled="!isOperate"
|
size="mini"
|
style="width: 100%; margin-right: 5px"
|
@change="
|
(val) => {
|
commonInputChange(val, item.prop, scope.row, scope)
|
}
|
"
|
></el-input-number>
|
|
</el-form-item>
|
<!-- 调用方法显示文字 -->
|
<div v-else-if="item.isCallMethod">
|
<span :class="item.isClass ? item.getClassName(scope.row[item.prop], scope.row) : ''">{{
|
item.getCallMethod(scope.row[item.prop], scope.row)
|
}}</span>
|
</div>
|
<span v-else style="text-align: right">{{ scope.row[item.prop] }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="操作" width="80" v-if="!detailEnter" align="center">
|
<template slot-scope="scope">
|
<el-button type="text" size="small" :disabled="!isOperate" @click="deleteClick(scope)">删除</el-button>
|
</template>
|
</el-table-column>
|
<slot name="tableButton" />
|
<div slot="empty">
|
<el-empty description="暂无数据"></el-empty>
|
</div>
|
</el-table>
|
</el-form>
|
</div>
|
<!-- <div
|
v-if="detailEnter"
|
class="add-column-box"
|
@click="addColumnClick"
|
:style="{ width: detailEnter ? '40px' : '0px' }"
|
>
|
<i class="el-icon-circle-plus"></i>
|
</div> -->
|
</div>
|
<div v-if="detailEnter" style="margin: 10px">
|
<div class="add-btn-box" @click="addRowClick">
|
<i class="el-icon-circle-plus"></i>
|
</div>
|
<!-- <el-button size="small" type="primary" :disabled="!isOperate" @click="add">新增</el-button> -->
|
<!-- <el-button size="small" type="primary" disabled>导入明细</el-button> -->
|
</div>
|
</div>
|
</template>
|
|
<script>
|
// import { getProductList } from "@/api/common/other"
|
import {getDict } from "@/api/systemSetting/dataDictionary"
|
export default {
|
name: "CommmonFormTableView",
|
components: {},
|
props: {
|
detailEnter: {
|
type: Boolean,
|
default: false
|
},
|
selectBox: {
|
type: Boolean,
|
default: false
|
},
|
// 那个页面 用来判断计算方式
|
pageName: {
|
type: String,
|
default: ""
|
},
|
// 列表新增是否多选
|
addTypeIdMultiple: {
|
type: Boolean,
|
default: false
|
},
|
// 根据报价单查询产品
|
quotationNumber: {
|
type: [String, Number],
|
default: ""
|
},
|
// 是否可以操作 添加等
|
isOperate: {
|
type: Boolean,
|
default: true
|
},
|
silkTableList: {
|
type: Object,
|
default: () => {
|
return {
|
tableData: [], // 接口返回数据
|
isReturn: false,
|
tableColumn: [
|
// table表单
|
{ label: "", prop: "", min: 200, tooltip: true }
|
]
|
}
|
}
|
}
|
},
|
data() {
|
return {
|
total: 0,
|
productList: [],
|
tableList: [],
|
projectIndex: 0,
|
projectOptions: [
|
{ id: 1, value: "纤度偏差" },
|
{ id: 2, value: "二次变化" },
|
{ id: 3, value: "清洁分" },
|
{ id: 4, value: "洁净分" },
|
{ id: 5, value: "最大偏差" }
|
],
|
workshopList:[],// 车间列表
|
carFlagList:[
|
{name:"左半车",id:1},
|
{name:"右半车",id:2},
|
{name:"全车结束",id:3},
|
],//半车标志
|
getDataParams:{
|
page: 1,
|
pageSize:10,
|
dictType:1,
|
},
|
}
|
},
|
created() {
|
// if (!this.selectBox) {
|
// this.getProductList()
|
// }
|
this.getTableInfo()
|
this.getWorkshopList()
|
},
|
watch: {
|
silkTableList: {
|
handler() {
|
this.getTableInfo()
|
},
|
immediate: true
|
}
|
},
|
computed: {},
|
methods: {
|
// 自定义表头点击事件
|
settingClick(item) {
|
this.$emit("settingClick", item);
|
},
|
getTableInfo() {
|
this.tableList = this.silkTableList
|
if (this.tableList.tableData.length === 1 && this.tableList.tableData[0].name === "") {
|
this.isRecalculate = false
|
} else {
|
this.isRecalculate = true
|
}
|
},
|
// 多选
|
handleSelectionChange(val) {
|
this.$emit("getSelectArray", val)
|
},
|
|
// 新增
|
addRowClick() {
|
if (this.addTypeIdMultiple) {
|
this.projectIndex = this.tableList.tableData.length
|
this.editSelCommonConfig.title = "产品名称"
|
this.editSelCommonConfig.isSelectBox = true
|
this.editSelCommonConfig.editVisible = true
|
} else {
|
this.$emit("addProjectClick")
|
}
|
},
|
commonInputChange(val, prop, row, scope) {
|
this.$emit("inputContent", val, prop, row, scope)
|
},
|
// 删除
|
deleteClick(scope) {
|
this.$emit("clearupProject", this.tableList.tableData, scope.$index)
|
},
|
// 删除
|
clearupClient(scope) {
|
this.$emit("clearupProject", this.tableList.tableData, scope.$index)
|
},
|
// 添加列按钮
|
addColumnClick() {
|
this.$emit("addColumnClick")
|
},
|
// 添加列头部标题输入
|
addColumnInputChange(val, prop) {
|
console.log(val, prop, "添加列头部标题输入")
|
},
|
// 删除列
|
clearupColumn(prop) {
|
console.log(prop)
|
this.$emit("clearupColumn", prop)
|
},
|
async getWorkshopList(){
|
await getDict({
|
dictType:this.getDataParams.dictType,
|
page:this.getDataParams.page,
|
pageSize:this.getDataParams.pageSize,
|
}).then((res)=>{
|
console.log(res,"res")
|
this.workshopList=res.data
|
})
|
}
|
},
|
//解决表格抖动问题
|
beforeUpdate() {
|
this.$nextTick(() => {
|
this.$refs["fromTable"].doLayout()
|
})
|
},
|
}
|
</script>
|
|
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
<style lang="scss" scoped>
|
.page-view {
|
.top-box {
|
display: flex;
|
.table-box {
|
flex: 1;
|
.el-form-item {
|
margin-bottom: 0;
|
.custom-name {
|
display: flex;
|
.common-select-btn {
|
margin-left: 5px;
|
font-size: 18px;
|
cursor: pointer;
|
color: #ff0000;
|
}
|
}
|
}
|
}
|
.add-column-box {
|
// width: 40px;
|
margin-top: 10px;
|
font-size: 26px;
|
color: #5582f3;
|
margin-left: 20px;
|
cursor: pointer;
|
}
|
}
|
.add-btn-box {
|
font-size: 26px;
|
color: #5582f3;
|
margin-left: 50px;
|
cursor: pointer;
|
}
|
.add-column-box {
|
display: flex;
|
.common-select-btn {
|
margin-left: 5px;
|
font-size: 18px;
|
cursor: pointer;
|
color: #ff0000;
|
}
|
}
|
}
|
::v-deep {
|
.el-form-item__label {
|
display: none;
|
}
|
.el-table__footer-wrapper tbody td.el-table__cell {
|
background-color: #fff;
|
// text-align: right;
|
font-weight: bold;
|
}
|
.el-input--suffix .el-input__inner {
|
padding-right: 0px;
|
}
|
.el-table .cell,
|
.el-table th.el-table__cell > .cell {
|
padding: 0 5px;
|
}
|
.el-input__inner {
|
// text-align: left;
|
text-align: center !important;
|
}
|
}
|
</style>
|
