<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%"
|
:header-cell-style="{ background: '#f1f3f8', color: '#000009' }"
|
>
|
<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
|
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-select
|
v-model="scope.row[item.prop]"
|
placeholder="请选择"
|
size="mini"
|
style="width: 63%"
|
@change="selProductClick"
|
>
|
<el-option v-for="item in productNameOptions" :key="item.id" :label="item.name" :value="item">
|
</el-option>
|
</el-select>
|
</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-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
|
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: '输入不能为空' }]"
|
>
|
<el-input-number
|
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>
|
</el-form-item>
|
<el-form-item v-else-if="item.select" label=" " :prop="'tableData.' + scope.$index + '.' + item.prop">
|
<div class="custom-name">
|
<el-select
|
v-model="scope.row[item.prop]"
|
placeholder="请选择"
|
size="mini"
|
style="width: 63%"
|
@change="selCommonClick"
|
>
|
<el-option v-for="item in selOptions" :key="item.id" :label="item.name" :value="item"> </el-option>
|
</el-select>
|
</div>
|
</el-form-item>
|
<span v-else>{{ scope.row[item.prop] }}</span>
|
</template>
|
<span v-else>{{ scope.row[item.prop] }}</span>
|
</template>
|
</el-table-column>
|
<slot name="tableButton" />
|
</el-table>
|
</el-form>
|
<div v-if="!detailEnter" style="margin: 10px">
|
<el-button size="small" type="primary" @click="add">添加明细行</el-button>
|
<!-- <el-button 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: {},
|
props: {
|
detailEnter: {
|
type: Boolean,
|
default: false
|
},
|
sign: {
|
type: String,
|
default: ""
|
},
|
productTableList: {
|
type: Object,
|
default: () => {
|
return {
|
tableData: [], // 接口返回数据
|
tableColumn: [
|
// table表单
|
{ label: "", prop: "", min: 200, tooltip: true }
|
]
|
}
|
}
|
}
|
},
|
data() {
|
return {
|
total: 0,
|
productList: [],
|
tableList: [],
|
editSelCommonConfig: {
|
editVisible: false,
|
title: "",
|
infomation: {}
|
},
|
productIndex: 0,
|
productNameOptions: [
|
{ id: 1, name: "aaaaa" },
|
{ id: 2, name: "bbbbbbbbbb" }
|
],
|
selOptions: [
|
{ id: 1, name: "件" },
|
{ id: 2, name: "打" }
|
]
|
}
|
},
|
created() {
|
// this.getProductList()
|
this.tableList = this.productTableList
|
},
|
computed: {},
|
watch: {
|
productTableList() {
|
this.tableList = this.productTableList
|
}
|
},
|
methods: {
|
// 产品名称
|
async getProductList() {
|
// let fn = this.sign == "purchase" ? getProductList : getProductListFromGrpc
|
let fn
|
await fn({
|
page: 1,
|
pageSize: 100
|
}).then((res) => {
|
console.log(res.data)
|
if (res.data.code === 200) {
|
if (res.data.data.list && res.data.data.list.length > 0) {
|
this.productList = res.data.data.list
|
}
|
}
|
})
|
},
|
// 选择产品
|
selProductClick(val) {
|
console.log("aaa")
|
console.log(val)
|
},
|
// 选择单位
|
selCommonClick(item) {
|
console.log(item)
|
},
|
handleReserve(row) {
|
return row._id ? row._id : row.id
|
},
|
handleSelectionChange(val) {
|
this.$emit("getSelectArray", val)
|
},
|
|
// 数字换行为金额显示格式
|
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) {
|
console.log(val, prop)
|
console.log(row)
|
this.$emit("inputContent", val, prop, row)
|
},
|
// 清空
|
empty() {
|
this.$emit("emptyProductClick")
|
},
|
// 清除已选择用户
|
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>
|
