修改表单构建
夜笙歌
4 months ago
parent
33476702ad
commit
99f10b3c5f
@ -1,31 +1,192 @@
|
|||||||
<template>
|
<template>
|
||||||
<div><span>单行文本</span>
|
<div style="margin-bottom: 12px;">
|
||||||
<el-input v-model="pageForm['input-7f3ceb4e-9aaf-42ff-95f7-86c9205748d8']"
|
<el-button :icon="Plus" type="primary" @click="aaAdd">新增</el-button>
|
||||||
type="text" autocomplete="new-password" />
|
<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>
|
</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>
|
<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-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>
|
|
||||||
</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>重置</el-button>
|
<el-button>重置</el-button>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
</el-form>
|
</el-form>
|
||||||
|
<pagination v-show="pageData.total > 0"
|
||||||
|
v-model:page="a['pageNum']"
|
||||||
|
v-model:limit="a['pageSize']"
|
||||||
|
:total="pageData.total" @pagination="aSubmit" />
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
const pageForm = ref({
|
import { Delete, Edit, Plus } from '@element-plus/icons-vue';
|
||||||
'input-7f3ceb4e-9aaf-42ff-95f7-86c9205748d8': '',
|
import request from '@/utils/request';
|
||||||
'form-faa5bd9b-5d6b-4549-9646-2bc9f238c43d': {},
|
|
||||||
'form-207b81de-b83d-4e60-be3b-1b8d4d9ad442': {}
|
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>
|
</script>
|
||||||
|
|||||||
Loading…
Reference in New Issue