修改表单构建
夜笙歌
4 months ago
parent
33476702ad
commit
99f10b3c5f
@ -1,31 +1,192 @@
|
||||
<template>
|
||||
<div><span>单行文本</span>
|
||||
<el-input v-model="pageForm['input-7f3ceb4e-9aaf-42ff-95f7-86c9205748d8']"
|
||||
type="text" autocomplete="new-password" />
|
||||
<div style="margin-bottom: 12px;">
|
||||
<el-button :icon="Plus" type="primary" @click="aaAdd">新增</el-button>
|
||||
<el-button :icon="Edit" type="success" :disabled="aaSelectionList.length !== 1" @click="aaUpdate()">编辑
|
||||
</el-button>
|
||||
<el-button :icon="Delete" type="danger" :disabled="!(aaSelectionList.length >= 1)" @click="aaDel()">删除
|
||||
</el-button>
|
||||
</div>
|
||||
<el-table :data="formData['table']"
|
||||
style="width: 100%"
|
||||
@selection-change="aaSelectionChange">
|
||||
<el-table-column type="selection" width="55" />
|
||||
<el-table-column prop="materialName" label="materialName" />
|
||||
<el-table-column prop="planAmount" label="planAmount" />
|
||||
<el-table-column prop="processName" label="processName" />
|
||||
<el-table-column prop="releaseName" label="releaseName" />
|
||||
<el-table-column prop="planId" label="planId" />
|
||||
<el-table-column label="操作">
|
||||
<template #default="scope">
|
||||
<el-button
|
||||
link
|
||||
type="primary"
|
||||
size="small"
|
||||
@click.prevent="aaUpdate(scope)"
|
||||
>
|
||||
修改
|
||||
</el-button>
|
||||
<el-button
|
||||
link
|
||||
type="primary"
|
||||
size="small"
|
||||
@click.prevent="aaDel(scope)"
|
||||
>
|
||||
删除
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<el-dialog v-model="aaOperationFormVisible" :title="aaOperationTitle" width="500">
|
||||
<el-form :model="aaOperationForm" label-width="120px">
|
||||
<el-form-item label="materialName" :required="undefined">
|
||||
<el-input v-model="aaOperationForm['materialName']"
|
||||
type="input" autocomplete="new-password" />
|
||||
</el-form-item>
|
||||
<el-form-item label="planAmount" :required="undefined">
|
||||
<el-input v-model="aaOperationForm['planAmount']"
|
||||
type="input" autocomplete="new-password" />
|
||||
</el-form-item>
|
||||
<el-form-item label="processName" :required="undefined">
|
||||
<el-input v-model="aaOperationForm['processName']"
|
||||
type="input" autocomplete="new-password" />
|
||||
</el-form-item>
|
||||
<el-form-item label="releaseName" :required="undefined">
|
||||
<el-input v-model="aaOperationForm['releaseName']"
|
||||
type="input" autocomplete="new-password" />
|
||||
</el-form-item>
|
||||
<el-form-item label="planId" :required="undefined">
|
||||
<el-input v-model="aaOperationForm['planId']"
|
||||
type="input" autocomplete="new-password" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button @click="aaOperationFormVisible = false;aaOperationForm={}">关闭</el-button>
|
||||
<el-button type="primary" @click="aaAddSubmit">
|
||||
提交
|
||||
</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
<div>
|
||||
<el-form :model="pageForm['form-faa5bd9b-5d6b-4549-9646-2bc9f238c43d']" label-width="120px">
|
||||
<el-form :model="a " label-width="120px">
|
||||
<el-form-item>
|
||||
<el-button type="primary">提交</el-button>
|
||||
<el-button>重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<div>
|
||||
<el-form :model="pageForm['form-207b81de-b83d-4e60-be3b-1b8d4d9ad442']" label-width="120px">
|
||||
<el-form-item>
|
||||
<el-button type="primary">提交</el-button>
|
||||
<el-button type="primary" @click="aSubmit">提交</el-button>
|
||||
<el-button>重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<pagination v-show="pageData.total > 0"
|
||||
v-model:page="a['pageNum']"
|
||||
v-model:limit="a['pageSize']"
|
||||
:total="pageData.total" @pagination="aSubmit" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const pageForm = ref({
|
||||
'input-7f3ceb4e-9aaf-42ff-95f7-86c9205748d8': '',
|
||||
'form-faa5bd9b-5d6b-4549-9646-2bc9f238c43d': {},
|
||||
'form-207b81de-b83d-4e60-be3b-1b8d4d9ad442': {}
|
||||
import { Delete, Edit, Plus } from '@element-plus/icons-vue';
|
||||
import request from '@/utils/request';
|
||||
|
||||
const formData = ref({});
|
||||
const formDataOperation = {
|
||||
get: (key) => {
|
||||
return formData.value[key];
|
||||
},
|
||||
set: (key, value) => {
|
||||
formData.value[key] = value;
|
||||
}
|
||||
};
|
||||
const pageData = ref({});
|
||||
|
||||
const aaOperationForm = ref({
|
||||
'materialName': '',
|
||||
'planAmount': '',
|
||||
'processName': '',
|
||||
'releaseName': '',
|
||||
'planId': ''
|
||||
});
|
||||
|
||||
const a = ref({});
|
||||
|
||||
|
||||
const table = ref([]);
|
||||
|
||||
const aaSelectionList = ref([]);
|
||||
|
||||
const aaOperationFormVisible = ref(false);
|
||||
|
||||
const aaOperationTitle = ref('');
|
||||
|
||||
const aaSelectionChange = (e) => {
|
||||
aaSelectionList.value = e;
|
||||
};
|
||||
const aaUpdate = (scope) => {
|
||||
if (!scope) {
|
||||
aaOperationForm.value = aaSelectionList.value[0];
|
||||
} else {
|
||||
aaOperationForm.value = scope.row;
|
||||
}
|
||||
aaOperationFormVisible.value = true;
|
||||
};
|
||||
|
||||
const aaAdd = () => {
|
||||
aaOperationForm.value = {};
|
||||
aaOperationFormVisible.value = true;
|
||||
};
|
||||
|
||||
|
||||
const aaDel = () => {
|
||||
ElMessageBox.confirm(
|
||||
'确定删除这些数据吗?',
|
||||
'Warning',
|
||||
{
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
beforeClose: async (action, instance, done) => {
|
||||
try {
|
||||
let localData = pageData.value;
|
||||
let formData = { id: aaSelectionList.value.map(v => v[id]) };
|
||||
|
||||
done();
|
||||
} catch (e) {
|
||||
console.log(e);
|
||||
}
|
||||
}
|
||||
}
|
||||
)
|
||||
.then(async () => {
|
||||
ElMessage({
|
||||
type: 'success',
|
||||
message: '删除完成'
|
||||
});
|
||||
})
|
||||
.catch(() => {
|
||||
ElMessage({
|
||||
type: 'info',
|
||||
message: '取消删除'
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
const aaAddSubmit = async () => {
|
||||
let formData = aaOperationForm.value;
|
||||
let localData = pageData.value;
|
||||
|
||||
aaOperationFormVisible.value = false;
|
||||
};
|
||||
|
||||
const aSubmit = async () => {
|
||||
let formData = a.value;
|
||||
let localData = pageData.value;
|
||||
|
||||
const table = await request({
|
||||
url: 'mes/planInfo/list',
|
||||
method: 'get',
|
||||
params: formData
|
||||
});
|
||||
formDataOperation.set('table', table.rows);
|
||||
localData.total = table.total;
|
||||
};
|
||||
|
||||
</script>
|
||||
|
||||
Loading…
Reference in New Issue