|
@@ -4,8 +4,8 @@
|
|
|
<el-table-column v-for="item in props.formData.filter(i=>i.showInTable)" :label="item.label" :prop="item.fieldName" />
|
|
|
<el-table-column fixed="right" label="操作">
|
|
|
<template #default="scope">
|
|
|
- <el-button link type="primary" @click="handleEditRow(scope.$index)">编辑</el-button>
|
|
|
- <el-popconfirm title="确认删除此条?" @confirm="handleDeleteRow(scope.$index)">
|
|
|
+ <el-button link type="primary" @click="handleEditRow(scope.$index)">{{ props.isEdit? '编辑': '查看'}}</el-button>
|
|
|
+ <el-popconfirm v-if="props.isEdit" title="确认删除此条?" @confirm="handleDeleteRow(scope.$index)">
|
|
|
<template #reference>
|
|
|
<el-button link type="primary">删除</el-button>
|
|
|
</template>
|
|
@@ -13,93 +13,97 @@
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
</el-table>
|
|
|
- <span class="table-add" @click="handleTableAdd"></span>
|
|
|
+ <span class="table-add" @click="handleTableAdd" v-if="props.isEdit"></span>
|
|
|
<el-dialog
|
|
|
- v-model="dialogVisible"
|
|
|
- :title="editingRowIndex===-1? '新增': '删除'"
|
|
|
- width="42%"
|
|
|
- append-to-body
|
|
|
- :close-on-click-modal="false"
|
|
|
- draggable
|
|
|
- :before-close="handleDialogClose"
|
|
|
- destroy-on-close
|
|
|
- class="dialog-default"
|
|
|
+ v-model="dialogVisible"
|
|
|
+ :title="editingRowIndex===-1? '新增': '删除'"
|
|
|
+ width="42%"
|
|
|
+ append-to-body
|
|
|
+ :close-on-click-modal="false"
|
|
|
+ draggable
|
|
|
+ :before-close="handleDialogClose"
|
|
|
+ destroy-on-close
|
|
|
+ class="dialog-default"
|
|
|
>
|
|
|
<my-form v-if="dialogVisible" ref="my_form" :form-data="props.formData" class="form-dialog"></my-form>
|
|
|
<template #footer>
|
|
|
- <el-button class="btn-default primary" type="primary" @click="handleDialogSave">保存</el-button>
|
|
|
- <el-button class="btn-default" @click="handleDialogClose">取消</el-button>
|
|
|
+ <el-button v-if="props.isEdit" class="btn-default primary" type="primary" @click="handleDialogSave">保存</el-button>
|
|
|
+ <el-button class="btn-default" @click="handleDialogClose">关闭</el-button>
|
|
|
</template>
|
|
|
</el-dialog>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
-import { onMounted, ref } from 'vue'
|
|
|
-import MyForm from './Form.vue'
|
|
|
+ import { onMounted, ref } from 'vue'
|
|
|
+ import MyForm from './Form.vue'
|
|
|
|
|
|
-onMounted(() => {
|
|
|
+ onMounted(() => {
|
|
|
|
|
|
-})
|
|
|
+ })
|
|
|
|
|
|
-const props = defineProps({
|
|
|
- formData: {
|
|
|
- type: Array,
|
|
|
- default: () => []
|
|
|
- },
|
|
|
- tableData: {
|
|
|
- type: Array,
|
|
|
- default: () => []
|
|
|
- }
|
|
|
-})
|
|
|
+ const props = defineProps({
|
|
|
+ formData: {
|
|
|
+ type: Array,
|
|
|
+ default: () => []
|
|
|
+ },
|
|
|
+ tableData: {
|
|
|
+ type: Array,
|
|
|
+ default: () => []
|
|
|
+ },
|
|
|
+ isEdit: {
|
|
|
+ type: Boolean,
|
|
|
+ default: true
|
|
|
+ }
|
|
|
+ })
|
|
|
|
|
|
-const editingRowIndex = ref(-1)
|
|
|
+ const editingRowIndex = ref(-1)
|
|
|
|
|
|
-function handleEditRow(index) {
|
|
|
- dialogVisible.value = true
|
|
|
- editingRowIndex.value = index
|
|
|
- props.formData.forEach(i => {
|
|
|
- i.value = props.tableData[index][i.fieldName]
|
|
|
- })
|
|
|
-}
|
|
|
+ function handleEditRow(index) {
|
|
|
+ dialogVisible.value = true
|
|
|
+ editingRowIndex.value = index
|
|
|
+ props.formData.forEach(i => {
|
|
|
+ i.value = props.tableData[index][i.fieldName]
|
|
|
+ })
|
|
|
+ }
|
|
|
|
|
|
-function handleDeleteRow(index) {
|
|
|
- props.tableData.splice(index,1)
|
|
|
-}
|
|
|
+ function handleDeleteRow(index) {
|
|
|
+ props.tableData.splice(index,1)
|
|
|
+ }
|
|
|
|
|
|
-function handleTableAdd() {
|
|
|
- dialogVisible.value = true
|
|
|
-}
|
|
|
+ function handleTableAdd() {
|
|
|
+ dialogVisible.value = true
|
|
|
+ }
|
|
|
|
|
|
-const dialogVisible = ref(false)
|
|
|
+ const dialogVisible = ref(false)
|
|
|
|
|
|
-const my_form = ref(null)
|
|
|
+ const my_form = ref(null)
|
|
|
|
|
|
-function handleDialogSave() {
|
|
|
- my_form.value.validateForm().then(valid => {
|
|
|
- if(valid) {
|
|
|
- let tableRow = {}
|
|
|
- props.formData.forEach(i => {
|
|
|
- tableRow[i.fieldName] = i.value
|
|
|
- })
|
|
|
- if(editingRowIndex.value!==-1) {
|
|
|
- props.tableData[editingRowIndex.value] = tableRow
|
|
|
- } else {
|
|
|
- props.tableData.push(tableRow)
|
|
|
+ function handleDialogSave() {
|
|
|
+ my_form.value.validateForm().then(valid => {
|
|
|
+ if(valid) {
|
|
|
+ let tableRow = {}
|
|
|
+ props.formData.forEach(i => {
|
|
|
+ tableRow[i.fieldName] = i.value
|
|
|
+ })
|
|
|
+ if(editingRowIndex.value!==-1) {
|
|
|
+ props.tableData[editingRowIndex.value] = tableRow
|
|
|
+ } else {
|
|
|
+ props.tableData.push(tableRow)
|
|
|
+ }
|
|
|
+ handleDialogClose()
|
|
|
}
|
|
|
- handleDialogClose()
|
|
|
- }
|
|
|
- })
|
|
|
-}
|
|
|
+ })
|
|
|
+ }
|
|
|
|
|
|
-function handleDialogClose() {
|
|
|
- // my_form.value.clearForm()
|
|
|
- dialogVisible.value = false
|
|
|
- editingRowIndex.value = -1
|
|
|
- props.formData.forEach(i => {
|
|
|
- i.value = ''
|
|
|
- })
|
|
|
-}
|
|
|
+ function handleDialogClose() {
|
|
|
+ // my_form.value.clearForm()
|
|
|
+ dialogVisible.value = false
|
|
|
+ editingRowIndex.value = -1
|
|
|
+ props.formData.forEach(i => {
|
|
|
+ i.value = ''
|
|
|
+ })
|
|
|
+ }
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
@@ -111,7 +115,7 @@ function handleDialogClose() {
|
|
|
margin: 15px 0;
|
|
|
border: 1px dashed #ccc;
|
|
|
cursor: pointer;
|
|
|
-
|
|
|
+
|
|
|
&:hover {
|
|
|
background-color: var(--bg-color-3);
|
|
|
}
|