You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
163 lines
5.1 KiB
163 lines
5.1 KiB
<template>
|
|
<div class="jcb-table-container">
|
|
<CustomTable :ref="`tableRef`" :columns="jcbColumns" :formData="formData" :prefixKey="prefixKey"
|
|
class="jcb-table" operationWidth="120px" @clickButton="handleClickButton" @blur="commonHandleUpdate"
|
|
@onAddRow="onAddRow"
|
|
@onRegentSubmit="commonHandleUpdate"
|
|
fieldItemLabel="template.common.operationSteps" :showOperation="templateFillType === 'preFill'">
|
|
<template slot="operation" slot-scope="{ row, rowIndex, columns }">
|
|
<TableOpertaionDelete :row="row" :rowIndex="rowIndex" :columns="columns" @deleteRow="deleteRow">
|
|
</TableOpertaionDelete>
|
|
</template>
|
|
</CustomTable>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import CustomTable from '../CustomTable.vue';
|
|
import TableOpertaionDelete from "@/components/Template/operation/TableOpertaionDelete.vue";
|
|
import { getuuid } from "@/utils/index.js";
|
|
import moment from "moment"
|
|
|
|
export default {
|
|
inject: ['templateFillType'],
|
|
components: {
|
|
CustomTable,
|
|
TableOpertaionDelete,
|
|
},
|
|
name: 'JcbComp',
|
|
props: {
|
|
formData: {
|
|
type: Object,
|
|
default: () => { },
|
|
},
|
|
prefixKey: {
|
|
type: String,
|
|
default: '',
|
|
},
|
|
item:{
|
|
type: Object,
|
|
default: () => { },
|
|
},
|
|
type:{
|
|
type: String,
|
|
default: 'qb',
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
};
|
|
},
|
|
mounted() {
|
|
console.log(this.prefixKey,"prefixKey")
|
|
},
|
|
computed: {
|
|
jcbColumns() {
|
|
const { buttonName = "取出" } = this.item;
|
|
return [
|
|
{
|
|
label: '处理批',
|
|
prop: 'mc',
|
|
width: '200px',
|
|
bodyType: "jcb",
|
|
bodyKey: "clpClick",
|
|
bodyFillType: "preFill",
|
|
bodySubType: 'span',
|
|
bodySubKey: 'bh',
|
|
},
|
|
{
|
|
label: '时间',
|
|
prop: 'time',
|
|
width: '200px',
|
|
bodyType: "input",
|
|
bodyDisabled: true,
|
|
bodyFillType: "actFill",
|
|
bodySubType: "button",
|
|
bodySubButtonName: buttonName,
|
|
bodySubKey: "timeClick",
|
|
bodySubFillType: "actFill",
|
|
},
|
|
|
|
]
|
|
},
|
|
},
|
|
methods: {
|
|
// 添加表格行
|
|
onAddRow(data) {
|
|
const { dataSource = [] } = data;
|
|
const tableRef = this.$refs['tableRef'];
|
|
if (tableRef) {
|
|
tableRef.addRow({ mc: '', time: '' ,id:getuuid(),rowIndex:dataSource.length});
|
|
// 添加行后触发数据变化
|
|
this.onDataChange();
|
|
}
|
|
},
|
|
// 删除表格行
|
|
deleteRow(rowIndex) {
|
|
const tableRef = this.$refs['tableRef'];
|
|
if (tableRef) {
|
|
tableRef.deleteRow(rowIndex);
|
|
// 删除行后触发数据变化
|
|
this.onDataChange();
|
|
}
|
|
},
|
|
// 实现validateFormData方法，用于表单验证
|
|
validateFormData() {
|
|
|
|
// 调用CustomTable的同步验证方法
|
|
const validateResult = this.$refs.tableRef.validateFormData();
|
|
|
|
// 如果验证通过，还需要检查是否有数据行
|
|
if (validateResult.valid) {
|
|
const filledData = this.$refs.tableRef.getFilledFormData();
|
|
const { stepTableFormData = [] } = filledData;
|
|
if (stepTableFormData.length === 0) {
|
|
return { valid: false, error: '请添加取板数据' };
|
|
}
|
|
}
|
|
console.log("validateResult",validateResult);
|
|
return validateResult;
|
|
},
|
|
// 点击按钮事件
|
|
handleClickButton(key, rowIndex,colIndex,e,data) {
|
|
if (key === 'timeClick') {
|
|
this.$refs['tableRef'].updateDataSourceByRowIndex(rowIndex, { time: moment().format("YYYY-MM-DD HH:mm:ss") },{signData:data,updateFields:['time']})
|
|
this.onDataChange();
|
|
}
|
|
},
|
|
// 数据变化处理方法
|
|
onDataChange() {
|
|
// 获取表格数据
|
|
let tableData = [];
|
|
if (this.$refs.tableRef) {
|
|
const filledData = this.$refs.tableRef.getFilledFormData();
|
|
tableData = filledData.stepTableFormData || [];
|
|
}
|
|
|
|
// 触发自定义事件，将数据变化传递给父组件
|
|
this.$emit('update', {
|
|
jcbInfo: {
|
|
stepTableFormData: tableData,
|
|
}
|
|
});
|
|
},
|
|
|
|
// 处理表格blur事件
|
|
commonHandleUpdate() {
|
|
// 表格数据变化时触发数据变化通知
|
|
this.onDataChange();
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.jcb-table-container {
|
|
width: 600px;
|
|
}
|
|
|
|
.jcb-table {
|
|
.custom-table-wrapper {
|
|
margin-top: 0;
|
|
}
|
|
}
|
|
</style>
|