<template>
|
<div class="page-view">
|
<el-form ref="form" :model="tableList" :show-message="false" label-position="right">
|
<el-table
|
:data="tableList.tableData"
|
style="width: 100%"
|
:show-summary="showSummary.show"
|
:summary-method="getSummaries"
|
:span-method="arraySpanMethod"
|
@row-click="rowClick"
|
>
|
<el-table-column type="index" v-if="tableList.tableColumn && tableList.tableColumn.length > 0" 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>
|
<span>{{ item.label }}</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 :disabled="item.disabled" v-model.trim="scope.row[item.prop]" maxlength="50" size="mini" @change="(val) => {
|
commonInputChange(val, item.prop, scope.row)
|
}
|
"></el-input>
|
</el-form-item>
|
<el-form-item v-else-if="item.productName" label=" " :prop="'tableData.' + scope.$index + '.' + item.prop">
|
<div class="custom-name">
|
<el-autocomplete :disabled="item.disabled" v-model="scope.row[item.prop]"
|
:fetch-suggestions="querySearchAsync" value-key="name" style="width: calc(100% - 70px)" size="mini"
|
@select="(val) => {
|
handleSelectClient(val, item.prop, scope.row)
|
}
|
"></el-autocomplete>
|
<div v-if="!item.disabled" class="common-select-btn" @click="selClientClick(scope.row, item.prop, scope)">
|
<i class="el-icon-circle-plus-outline" title="选择"></i>
|
</div>
|
<div v-if="!item.disabled" class="common-select-btn" @click="clearupClient(scope.row, scope)">
|
<i class="el-icon-remove-outline" title="清除"></i>
|
</div>
|
<div class="common-select-btn" v-if="scope.$index != 0 || !item.disabled"
|
@click="deleteClient(scope.row, scope)">
|
<i class="el-icon-delete" title="删除"></i>
|
</div>
|
</div>
|
</el-form-item>
|
<el-form-item v-else-if="item.date" 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"></el-input> -->
|
<el-date-picker v-model="scope.row[item.prop]" type="date" size="mini" style="width: 110px">
|
</el-date-picker>
|
</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 :disabled="item.disabled" v-model="scope.row[item.prop]" placeholder="" :min="0"
|
:controls="false" size="mini" style="width: 100%; margin-right: 5px" @change="(val) => {
|
commonInputChange(val, item.prop, scope.row)
|
}
|
"></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: '输入不能为空' }]">
|
<!-- 采购管理 -->
|
<template v-if="item.multiply">
|
<el-input-number :disabled="item.disabled"
|
:value="scope.row[showSummary.multiply[0]] * scope.row[showSummary.multiply[1]]" placeholder="" :min="0"
|
:precision="2" :controls="false" size="mini" style="width: 100%; margin-right: 5px" @input="(val) => {
|
commonInputChange(val, item.prop, scope.row)
|
}
|
"></el-input-number>
|
</template>
|
<template v-else>
|
<el-input-number :disabled="item.disabled" v-model="scope.row[item.prop]" placeholder="" :min="0"
|
:precision="2" :controls="false" size="mini" style="width: 100%; margin-right: 5px" @change="(val) => {
|
commonInputChange(val, item.prop, scope.row)
|
}
|
"></el-input-number>
|
</template>
|
</el-form-item>
|
<span v-else>{{ scope.row[item.prop] }}</span>
|
<!-- </template> -->
|
<!-- <span v-else>{{ scope.row[item.prop] }}</span> -->
|
</template>
|
</el-table-column>
|
</el-table>
|
</el-form>
|
<div v-if="!detailEnter" style="margin: 10px">
|
<el-button :disabled="tableList.disabled" size="small" type="primary" @click="add">新增</el-button>
|
<el-button :disabled="tableList.disabled" size="small" type="primary" @click="empty">清空</el-button>
|
</div>
|
<!-- 产品名称 -->
|
<SelectCommonDialog v-if="editSelCommonConfig.editVisible" :edit-common-config="editSelCommonConfig" :sign="sign"
|
@selClient="selClient" />
|
</div>
|
</template>
|
|
<script>
|
import { getProductListFromGrpc, getProductList } from "@/api/productManage/product"
|
import SelectCommonDialog from "@/views/other/commonDialog/SelectCommonDialog"
|
export default {
|
name: "CommmonFormTableView",
|
components: { SelectCommonDialog },
|
props: {
|
detailEnter: {
|
type: Boolean,
|
default: false
|
},
|
sign: {
|
type: String,
|
default: ""
|
},
|
productTableList: {
|
type: Object,
|
default: () => {
|
return {
|
tableProductList: [],
|
disabled: false,
|
tableData: [], // 接口返回数据
|
tableColumn: [
|
// table表单
|
{ label: "", prop: "", min: 200, tooltip: true }
|
]
|
}
|
}
|
},
|
showSummary: {
|
type: Object,
|
default: () => {
|
return {
|
show: false,
|
total: false,
|
refundable: false,
|
sumProp: [],
|
multiply: [],
|
titleProp: ["#", "产品名称"],
|
mergeNumber: 1
|
}
|
}
|
},
|
recalculateShow: {
|
type: [Boolean],
|
defalut: true
|
}
|
},
|
data() {
|
return {
|
total: 0,
|
productList: [],
|
tableList: [],
|
editSelCommonConfig: {
|
editVisible: false,
|
title: "",
|
infomation: {}
|
},
|
productIndex: 0,
|
tableProductLists: [],
|
}
|
},
|
created() {
|
this.getProductList()
|
this.tableList = this.productTableList
|
},
|
computed: {},
|
watch: {
|
productTableList() {
|
this.tableList = this.productTableList
|
},
|
},
|
methods: {
|
// 选择行
|
rowClick(row){
|
this.$emit("rowClick",row)
|
},
|
// 产品名称
|
async getProductList() {
|
let fn = this.sign == "purchase" ? getProductList : getProductListFromGrpc
|
await fn({
|
page: 1,
|
pageSize: 100
|
}).then((res) => {
|
if (res.code === 200) {
|
if (res.data.list && res.data.list.length > 0) {
|
this.productList = res.data.list
|
this.tableProductLists = res.data.list
|
}
|
}
|
})
|
},
|
handleReserve(row) {
|
return row._id ? row._id : row.id
|
},
|
handleSelectionChange(val) {
|
this.$emit("getSelectArray", val)
|
},
|
// 行合并
|
arraySpanMethod() {
|
if (this.showSummary.show) {
|
this.$nextTick(() => {
|
if (this.$refs.table) {
|
var current = this.$refs.table.querySelector(".el-table__footer-wrapper").querySelector(".el-table__footer")
|
var cell = current.rows[0].cells
|
for (let i = 0; i < this.showSummary.mergeNumber; i++) {
|
cell[i].style.display = "none"
|
}
|
cell[this.showSummary.mergeNumber].classList.remove("is-left")
|
cell[this.showSummary.mergeNumber].colSpan = this.showSummary.mergeNumber.toString()
|
}
|
})
|
}
|
},
|
// 合计
|
getSummaries(param) {
|
const { columns, data } = param
|
const sums = []
|
columns.forEach((column, index) => {
|
// // 更改行名称
|
if (index === this.showSummary.mergeNumber) {
|
sums[index] = "小计:"
|
return
|
}
|
const title = this.showSummary.titleProp
|
// 去除某些不需要计算的数据
|
if (title.includes(column.label)) {
|
sums[index] = ""
|
return
|
}
|
// 把当前表格数据中同个分类的数据收集起来
|
const values = data.map((item) => Number(item[column.property]))
|
// 过滤掉
|
if (!values.every((value) => Number.isNaN(value))) {
|
sums[index] = ` ${values.reduce((prev, curr) => {
|
const value = Number(curr)
|
if (!Number.isNaN(value)) {
|
const num = prev + curr
|
return Number(num.toFixed(2))
|
} else {
|
return Number(prev.toFixed(2))
|
}
|
}, 0)}`
|
} else {
|
sums[index] = ""
|
}
|
if (column.property === "total") {
|
this.total = sums[index]
|
this.$emit("getSummaries", this.total)
|
}
|
})
|
return sums
|
},
|
|
// 数字换行为金额显示格式
|
number_format(number, decimals, dec_point, thousands_sep) {
|
decimals = 2 //这里默认设置保留两位小数，也可以注释这句采用传入的参数
|
/*
|
* 参数说明：
|
* number：要格式化的数字
|
* decimals：保留几位小数
|
* dec_point：小数点符号
|
* thousands_sep：千分位符号
|
* */
|
number = (number + "").replace(/[^0-9+-Ee.]/g, "")
|
var n = !isFinite(+number) ? 0 : +number,
|
prec = !isFinite(+decimals) ? 0 : Math.abs(decimals),
|
sep = typeof thousands_sep === "undefined" ? "," : thousands_sep,
|
dec = typeof dec_point === "undefined" ? "." : dec_point
|
var s = n.toString().split(".")
|
var re = /(-?\d+)(\d{3})/
|
while (re.test(s[0])) {
|
s[0] = s[0].replace(re, "$1" + sep + "$2")
|
}
|
if ((s[1] || "").length < prec) {
|
s[1] = s[1] || ""
|
s[1] += new Array(prec - s[1].length + 1).join("0")
|
} else {
|
s[1] = s[1].substring(0, prec) //小数点位数超出长度时截取前面的位数
|
}
|
return s.join(dec)
|
},
|
// 新增
|
add() {
|
this.$emit("addProductClick")
|
},
|
commonInputChange(val, prop, row) {
|
this.$emit("inputContent", val, prop, row)
|
},
|
// 清空
|
empty() {
|
this.$emit("emptyProductClick")
|
},
|
// 选择产品名称相关方法
|
querySearchAsync(queryString, cb) {
|
var restaurants = this.tableProductLists
|
var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants
|
cb(results)
|
},
|
createStateFilter(queryString) {
|
return (state) => {
|
return state.name.toLowerCase().indexOf(queryString.toLowerCase()) === 0
|
}
|
},
|
handleSelectClient(item, prop, row) {
|
this.tableList.tableData.map((ite) => {
|
if (ite.name === item.name) {
|
ite.ID = row.ID
|
ite.amount = item.amount || 1
|
ite.number = item.number
|
ite.purchasePrice = item.purchasePrice
|
ite.unit = item.unit
|
ite.deliveryTime = item.deliveryTime
|
ite.shippingDuration = item.shippingDuration
|
ite.modelNumber = item.modelNumber
|
}
|
})
|
if (this.detailEnter) {
|
this.setEditName(item, row.ID)
|
}
|
this.$emit("handleProduct",item)
|
},
|
setEditName(item, ID) {
|
let selRow = {
|
ID: ID,
|
deliveryTime: item.deliveryTime,
|
maximumStock: item.maximumStock,
|
minimumStock: item.minimumStock,
|
modelNumber: item.modelNumber,
|
name: item.name,
|
number: item.number,
|
productType: item.productType,
|
purchasePrice: item.purchasePrice,
|
remark: item.remark,
|
shippingDuration: item.shippingDuration,
|
specifications: item.specifications,
|
supplierId: item.supplierId,
|
unit: item.unit
|
}
|
this.$emit("selCommonName", selRow)
|
},
|
selClientClick(row, prop, scope) {
|
console.log(row, prop)
|
this.productIndex = scope.$index
|
this.editSelCommonConfig.title = "产品名称"
|
this.editSelCommonConfig.editVisible = true
|
},
|
selClient(item) {
|
console.log(item)
|
console.log(this.tableList.tableData)
|
if (this.detailEnter) {
|
this.tableList.tableData.map((ite) => {
|
ite.ID
|
ite.name = item.name
|
ite.amount = item.amount || 1
|
ite.number = item.number
|
ite.purchasePrice = item.purchasePrice
|
ite.unit = item.unit
|
ite.deliveryTime = item.deliveryTime
|
ite.shippingDuration = item.shippingDuration
|
})
|
this.setEditName(item, this.tableList.tableData[0].ID)
|
} else {
|
this.tableList.tableData.map((ite, index) => {
|
if (index === this.productIndex) {
|
ite.name = item.name
|
ite.productId = item.ID
|
ite.amount = item.amount || 1
|
ite.number = item.number
|
ite.purchasePrice = item.purchasePrice
|
ite.unit = item.unit
|
ite.deliveryTime = item.deliveryTime
|
ite.shippingDuration = item.shippingDuration
|
this.$set(this.tableList.tableData, index, ite)
|
this.$forceUpdate()
|
}
|
})
|
|
console.log(this.tableList.tableData, "=====chanp")
|
}
|
},
|
// 清除已选择用户
|
clearupClient(row, scope) {
|
this.productIndex = scope.$index
|
this.tableList.tableData.map((ite, index) => {
|
console.log(scope.$index)
|
if (scope.$index && scope.$index >= 0) {
|
if (index === this.productIndex) {
|
ite.name = ""
|
ite.amount = 1
|
ite.number = ""
|
ite.purchasePrice = 0
|
ite.unit = ""
|
ite.deliveryTime = 0
|
ite.shippingDuration = 0
|
}
|
} else {
|
ite.name = ""
|
ite.amount = 1
|
ite.number = ""
|
ite.purchasePrice = 0
|
ite.unit = ""
|
ite.deliveryTime = 0
|
ite.shippingDuration = 0
|
}
|
})
|
this.$emit("clearupProduct", this.tableList.tableData)
|
},
|
deleteClient(row, scope) {
|
if (this.tableList.tableData.length == 1) {
|
this.$message.error("至少保留一条，不能刪除了！")
|
return true
|
}
|
this.tableList.tableData.splice(scope.$index, 1)
|
}
|
}
|
}
|
</script>
|
|
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
<style lang="scss" scoped>
|
.page-view {
|
min-width: 100px;
|
|
.el-form-item {
|
margin-bottom: 0;
|
|
.custom-name {
|
display: flex;
|
|
.common-select-btn {
|
margin-left: 5px;
|
font-size: 18px;
|
cursor: pointer;
|
}
|
}
|
}
|
}
|
|
::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;
|
}
|
}
|
</style>
|
