|
|
|
|
@ -100,6 +100,13 @@
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="data-preview" v-if="fileData.previewData">
|
|
|
|
|
<div class="table-operations" style="margin-bottom: 15px; display: flex; justify-content: flex-end;">
|
|
|
|
|
<el-button
|
|
|
|
|
type="primary"
|
|
|
|
|
size="small"
|
|
|
|
|
@click="handleAddNew"
|
|
|
|
|
>新增数据</el-button>
|
|
|
|
|
</div>
|
|
|
|
|
<h4>数据预览</h4>
|
|
|
|
|
<el-table :data="fileData.previewData.rows" border style="width: 100%">
|
|
|
|
|
<el-table-column
|
|
|
|
|
@ -109,8 +116,53 @@
|
|
|
|
|
:label="col.label"
|
|
|
|
|
width="180"
|
|
|
|
|
></el-table-column>
|
|
|
|
|
<el-table-column
|
|
|
|
|
label="操作"
|
|
|
|
|
width="180"
|
|
|
|
|
fixed="right"
|
|
|
|
|
>
|
|
|
|
|
<template slot-scope="scope">
|
|
|
|
|
<el-button
|
|
|
|
|
size="mini"
|
|
|
|
|
@click="handleEdit(scope.$index, scope.row)"
|
|
|
|
|
>编辑</el-button>
|
|
|
|
|
<el-button
|
|
|
|
|
size="mini"
|
|
|
|
|
type="danger"
|
|
|
|
|
@click="handleDelete(scope.$index)"
|
|
|
|
|
>删除</el-button>
|
|
|
|
|
</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
</el-table>
|
|
|
|
|
</div>
|
|
|
|
|
<el-dialog
|
|
|
|
|
:title="isEditing ? '编辑数据' : '新增数据'"
|
|
|
|
|
:visible.sync="dataDialogVisible"
|
|
|
|
|
width="50%"
|
|
|
|
|
>
|
|
|
|
|
<el-form
|
|
|
|
|
:model="currentRowData"
|
|
|
|
|
label-width="100px"
|
|
|
|
|
ref="dataForm"
|
|
|
|
|
:rules="formRules"
|
|
|
|
|
>
|
|
|
|
|
<el-form-item
|
|
|
|
|
v-for="col in fileData.previewData.columns"
|
|
|
|
|
:key="col.prop"
|
|
|
|
|
:label="col.label"
|
|
|
|
|
:prop="col.prop"
|
|
|
|
|
>
|
|
|
|
|
<el-input v-model="currentRowData[col.prop]"></el-input>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-form>
|
|
|
|
|
<span slot="footer">
|
|
|
|
|
<el-button @click="dataDialogVisible = false">取消</el-button>
|
|
|
|
|
<el-button
|
|
|
|
|
type="primary"
|
|
|
|
|
@click="submitDataForm"
|
|
|
|
|
>确 定</el-button>
|
|
|
|
|
</span>
|
|
|
|
|
</el-dialog>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
</process-step>
|
|
|
|
|
@ -135,7 +187,14 @@ export default {
|
|
|
|
|
loading: false,
|
|
|
|
|
uploadProgress: 0,
|
|
|
|
|
uploadStatus: 'waiting',
|
|
|
|
|
uploadTimer: null
|
|
|
|
|
uploadTimer: null,
|
|
|
|
|
dataDialogVisible: false,
|
|
|
|
|
currentRowData: {},
|
|
|
|
|
currentEditIndex: -1,
|
|
|
|
|
isEditing: false,
|
|
|
|
|
formRules: {
|
|
|
|
|
'col0': [{ required: true, message: '字段不能为空', trigger: 'blur' }]
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
@ -335,6 +394,50 @@ export default {
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
return { columns, rows }
|
|
|
|
|
},
|
|
|
|
|
handleEdit(index, row) {
|
|
|
|
|
this.currentRowData = { ...row }
|
|
|
|
|
this.currentEditIndex = index
|
|
|
|
|
this.isEditing = true
|
|
|
|
|
this.dataDialogVisible = true
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
handleDelete(index) {
|
|
|
|
|
this.$confirm('确认删除该行数据吗？', '提示', {
|
|
|
|
|
type: 'warning'
|
|
|
|
|
}).then(() => {
|
|
|
|
|
const newRows = this.fileData.previewData.rows.filter((_, i) => i !== index)
|
|
|
|
|
this.$store.commit('process/UPDATE_PREVIEW_DATA', { rows: newRows })
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
handleAddNew() {
|
|
|
|
|
this.currentRowData = this.fileData.previewData.columns.reduce((acc, col) => {
|
|
|
|
|
acc[col.prop] = ''
|
|
|
|
|
return acc
|
|
|
|
|
}, {})
|
|
|
|
|
this.currentRowData._id = this._generateUniqueId()
|
|
|
|
|
this.isEditing = false
|
|
|
|
|
this.dataDialogVisible = true
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
submitDataForm() {
|
|
|
|
|
this.$refs.dataForm.validate(valid => {
|
|
|
|
|
if (valid) {
|
|
|
|
|
const newRows = [...this.fileData.previewData.rows]
|
|
|
|
|
if (this.isEditing) {
|
|
|
|
|
newRows[this.currentEditIndex] = this.currentRowData
|
|
|
|
|
} else {
|
|
|
|
|
newRows.push(this.currentRowData)
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
this.$store.commit('process/UPDATE_PREVIEW_DATA', { rows: newRows })
|
|
|
|
|
this.dataDialogVisible = false
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
_generateUniqueId() {
|
|
|
|
|
return `row-${Date.now()}-${Math.floor(Math.random() * 1000)}`
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
@ -347,6 +450,12 @@ export default {
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style scoped>
|
|
|
|
|
.table-operations {
|
|
|
|
|
margin-bottom: 15px;
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: flex-end;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.file-upload {
|
|
|
|
|
width: 100%;
|
|
|
|
|
}
|
|
|
|
|
|
