修改表单构建

master
夜笙歌 1 month ago
parent 43304fb664
commit 1acb8ecde8

@ -0,0 +1,31 @@
<template>
<div style="width: 100%;height: 100%" ref="chartRef" />
</template>
<script setup>
import * as echarts from 'echarts';
const props = defineProps({
defaultOption: Object
});
const chart = ref(null);
const option = ref(null);
const chartRef = ref();
const setData = (e) => {
option.value = e;
initChart(e);
};
const initChart = (option) => {
if (!chart.value) {
chart.value = echarts.init(chartRef.value, 'macarons');
}
chart.value.setOption(option, true);
};
defineExpose({
setData
});
</script>

@ -9,10 +9,12 @@
<!-- <el-input v-model="queryParams.productOrderId" placeholder="请输入生产订单ID" clearable @keyup.enter="handleQuery" />-->
<!-- </el-form-item>-->
<el-form-item label='计划编号' prop='planCode'>
<el-input v-model='queryParams.planCode' placeholder='请输入计划编号' clearable @keyup.enter='handleQuery' />
<el-input v-model='queryParams.planCode' placeholder='请输入计划编号' clearable
@keyup.enter='handleQuery' />
</el-form-item>
<el-form-item label='物料名称' prop='materialName'>
<el-input v-model='queryParams.materialName' placeholder='请输入物料名称' clearable @keyup.enter='handleQuery' />
<el-input v-model='queryParams.materialName' placeholder='请输入物料名称' clearable
@keyup.enter='handleQuery' />
</el-form-item>
<!-- <el-form-item label="物料BOM" prop="materialBomId">-->
<!-- <el-input v-model="queryParams.materialBomId" placeholder="请输入物料BOM" clearable @keyup.enter="handleQuery" />-->
@ -113,7 +115,8 @@
<el-table v-loading='loading' :data='planInfoList' @selection-change='handleSelectionChange'>
<el-table-column type='selection' width='55' align='center' />
<el-table-column label='主键标识' align='center' prop='planId' v-if='columns[0].visible' />
<el-table-column label='生产订单ID' align='center' prop='productOrderId' v-if='columns[2].visible' width='100' />
<el-table-column label='生产订单ID' align='center' prop='productOrderId' v-if='columns[2].visible'
width='100' />
<el-table-column label='销售订单ID' align='center' prop='saleOrderId' v-if='columns[3].visible' />
<el-table-column label='销售订单编号' align='center' prop='saleorderCode' v-if='columns[4].visible' />
<el-table-column label='计划编号' align='center' prop='planCode' v-if='columns[5].visible' width='120' />
@ -122,8 +125,10 @@
<el-table-column label='物料BOM' align='center' prop='materialBomName' v-if='columns[8].visible' width='160' />
<el-table-column label='工序名称' align='center' prop='processName' v-if='columns[9].visible' />
<el-table-column label='顺序' align='center' prop='processOrder' v-if='columns[10].visible' />
<el-table-column label='上一工序ID' align='center' prop='lastProcessId' v-if='columns[11].visible' width='100' />
<el-table-column label='最后工序标识' align='center' prop='finalProcessFlag' v-if='columns[12].visible' width='110'>
<el-table-column label='上一工序ID' align='center' prop='lastProcessId' v-if='columns[11].visible'
width='100' />
<el-table-column label='最后工序标识' align='center' prop='finalProcessFlag' v-if='columns[12].visible'
width='110'>
<template #default='scope'>
<dict-tag :options='active_flag' :value='scope.row.finalProcessFlag' />
</template>
@ -148,7 +153,8 @@
<span>{{ parseTime(scope.row.planEndTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
</template>
</el-table-column>
<el-table-column label='实际开始时间' align='center' prop='realBeginTime' width='180' v-if='columns[21].visible'>
<el-table-column label='实际开始时间' align='center' prop='realBeginTime' width='180'
v-if='columns[21].visible'>
<template #default='scope'>
<span>{{ parseTime(scope.row.realBeginTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
</template>
@ -226,7 +232,8 @@
</el-input>
</el-form-item>
<el-form-item label='物料BOM' prop='materialBoMName'>
<el-input v-model='form.materialBoMName' placeholder='请点击检索物料BOM' @click='handleMaterialBomAdd' readonly>
<el-input v-model='form.materialBoMName' placeholder='请点击检索物料BOM' @click='handleMaterialBomAdd'
readonly>
<template #append>
<el-icon class='el-input__icon'>
<search />
@ -296,14 +303,14 @@
placeholder='请选择计划时间'>
</el-date-picker>
</el-form-item>
<!-- <el-form-item label='计划结束时间' prop='planEndTime'>-->
<!-- <el-date-picker clearable-->
<!-- v-model='form.planEndTime'-->
<!-- type='datetime'-->
<!-- value-format='YYYY-MM-DD HH:mm:ss'-->
<!-- placeholder='请选择计划结束时间'>-->
<!-- </el-date-picker>-->
<!-- </el-form-item>-->
<!-- <el-form-item label='计划结束时间' prop='planEndTime'>-->
<!-- <el-date-picker clearable-->
<!-- v-model='form.planEndTime'-->
<!-- type='datetime'-->
<!-- value-format='YYYY-MM-DD HH:mm:ss'-->
<!-- placeholder='请选择计划结束时间'>-->
<!-- </el-date-picker>-->
<!-- </el-form-item>-->
<!-- <el-form-item label="附件信息" prop="attachId">-->
<!-- <el-input v-model="form.attachId" placeholder="请输入附件信息" />-->
<!-- </el-form-item>-->
@ -422,14 +429,14 @@
placeholder='请选择计划时间'>
</el-date-picker>
</el-form-item>
<!-- <el-form-item label='计划结束时间' prop='planEndTime'>-->
<!-- <el-date-picker clearable-->
<!-- v-model='form.planEndTime'-->
<!-- type='date'-->
<!-- value-format='YYYY-MM-DD HH:mm:ss'-->
<!-- placeholder='请选择计划结束时间'>-->
<!-- </el-date-picker>-->
<!-- </el-form-item>-->
<!-- <el-form-item label='计划结束时间' prop='planEndTime'>-->
<!-- <el-date-picker clearable-->
<!-- v-model='form.planEndTime'-->
<!-- type='date'-->
<!-- value-format='YYYY-MM-DD HH:mm:ss'-->
<!-- placeholder='请选择计划结束时间'>-->
<!-- </el-date-picker>-->
<!-- </el-form-item>-->
<el-form-item label='班组' prop='classTeamId'>
<el-select v-model='form.classTeamId' placeholder='请选择班组'>
<el-option
@ -505,14 +512,14 @@
placeholder='请选择计划时间'>
</el-date-picker>
</el-form-item>
<!-- <el-form-item label='计划结束时间' prop='planEndTime'>-->
<!-- <el-date-picker clearable-->
<!-- v-model='form.planEndTime'-->
<!-- type='date'-->
<!-- value-format='YYYY-MM-DD HH:mm:ss'-->
<!-- placeholder='请选择计划结束时间'>-->
<!-- </el-date-picker>-->
<!-- </el-form-item>-->
<!-- <el-form-item label='计划结束时间' prop='planEndTime'>-->
<!-- <el-date-picker clearable-->
<!-- v-model='form.planEndTime'-->
<!-- type='date'-->
<!-- value-format='YYYY-MM-DD HH:mm:ss'-->
<!-- placeholder='请选择计划结束时间'>-->
<!-- </el-date-picker>-->
<!-- </el-form-item>-->
<el-form-item label='班组' prop='classTeamId'>
<el-select v-model='form.classTeamId' placeholder='请选择班组'>
<el-option
@ -547,7 +554,12 @@
</el-dialog>
<!-- 批量添加硫化计划信息对话框 -->
<el-dialog :title='vulBatchDialog.title' v-model='vulBatchDialog.visible' width='1200px' append-to-body>
<el-dialog v-model='vulBatchDialog.visible' width='1200px' append-to-body>
<template #header="{ close, titleId, titleClass }">
<div class="my-header">
{{ vulBatchDialog.title }}
</div>
</template>
<el-container style='height: 500px; border: 1px solid #eee'>
<div style='width: 400px; height: 100%; overflow: auto'>
<el-table v-loading='loading' :data='prodBaseMachineInfoList'
@ -564,7 +576,8 @@
<el-row :gutter='10' class='mb8'>
<el-col :span='12'>
<el-form-item label='物料名称' prop='materialId'>
<el-input v-model='form.materialName' placeholder='请点击检索物料' @click='handleMaterialAdd' readonly>
<el-input v-model='form.materialName' placeholder='请点击检索物料' @click='handleMaterialAdd'
readonly>
<template #append>
<el-icon class='el-input__icon'>
<search />
@ -575,7 +588,8 @@
</el-col>
<el-col :span='12'>
<el-form-item label='物料BOM' prop='materialBoMName'>
<el-input v-model='form.materialBoMName' placeholder='请点击检索物料BOM' @click='handleMaterialBomAdd'
<el-input v-model='form.materialBoMName' placeholder='请点击检索物料BOM'
@click='handleMaterialBomAdd'
readonly>
<template #append>
<el-icon class='el-input__icon'>
@ -634,14 +648,14 @@
</el-form-item>
</el-col>
<el-col :span='12'>
<!-- <el-form-item label='计划结束时间' prop='planEndTime'>-->
<!-- <el-date-picker clearable-->
<!-- v-model='form.planEndTime'-->
<!-- type='date'-->
<!-- value-format='YYYY-MM-DD HH:mm:ss'-->
<!-- placeholder='请选择计划结束时间'>-->
<!-- </el-date-picker>-->
<!-- </el-form-item>-->
<!-- <el-form-item label='计划结束时间' prop='planEndTime'>-->
<!-- <el-date-picker clearable-->
<!-- v-model='form.planEndTime'-->
<!-- type='date'-->
<!-- value-format='YYYY-MM-DD HH:mm:ss'-->
<!-- placeholder='请选择计划结束时间'>-->
<!-- </el-date-picker>-->
<!-- </el-form-item>-->
</el-col>
</el-row>
<el-form-item label='班组' prop='classTeamId'>
@ -1209,3 +1223,9 @@ onMounted(() => {
// }
// );
</script>
<style>
.my-header {
width: 100%;
text-align: center;
}
</style>

@ -1,32 +1,21 @@
<template>
<div>
<el-form :model="pageForm['form-34dc0db2-484e-4df1-b66c-12566e18524f']" label-width="120px">
<el-form-item label="表单" required="false">
<el-form :model="pageForm['form-7833bd1b-472d-4cda-abbb-d67dd50ddccf']" label-width="120px">
<el-form-item label="单行文本" :required="false">
<el-input
v-model="pageForm['form-34dc0db2-484e-4df1-b66c-12566e18524f']['form-7833bd1b-472d-4cda-abbb-d67dd50ddccf']['input-0f7bc3d0-a462-4a37-9b35-e90103b2461b']"
<div><span>单行文本</span>
<el-input v-model="pageForm['input-7f3ceb4e-9aaf-42ff-95f7-86c9205748d8']"
type="text" autocomplete="new-password" />
</el-form-item>
</el-form>
</el-form-item>
</el-form>
</div>
<div>
<el-form :model="pageForm['form-0bd2b044-1785-43b3-9985-44f9a8fe64c3']" label-width="120px">
<el-form-item label="单行文本" :required="false">
<el-input
v-model="pageForm['form-0bd2b044-1785-43b3-9985-44f9a8fe64c3']['input-4edcec9a-bce1-4a69-a7f0-520d0e0b330b']"
type="text" autocomplete="new-password" />
<el-form :model="pageForm['form-faa5bd9b-5d6b-4549-9646-2bc9f238c43d']" 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-aec5764a-5743-4ad0-87dc-d8af1bd7b70d']" label-width="120px">
<el-form-item label="单行文本" :required="false">
<el-input
v-model="pageForm['form-aec5764a-5743-4ad0-87dc-d8af1bd7b70d']['input-a7fa75bb-0456-4347-ad08-bfba9cb54089']"
type="text" autocomplete="new-password" />
<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-form-item>
</el-form>
</div>
@ -34,17 +23,9 @@
<script setup>
const pageForm = ref({
'form-34dc0db2-484e-4df1-b66c-12566e18524f': {
'form-7833bd1b-472d-4cda-abbb-d67dd50ddccf': {
'input-0f7bc3d0-a462-4a37-9b35-e90103b2461b': ''
}
},
'form-0bd2b044-1785-43b3-9985-44f9a8fe64c3': {
'input-4edcec9a-bce1-4a69-a7f0-520d0e0b330b': ''
},
'form-aec5764a-5743-4ad0-87dc-d8af1bd7b70d': {
'input-a7fa75bb-0456-4347-ad08-bfba9cb54089': ''
}
'input-7f3ceb4e-9aaf-42ff-95f7-86c9205748d8': '',
'form-faa5bd9b-5d6b-4549-9646-2bc9f238c43d': {},
'form-207b81de-b83d-4e60-be3b-1b8d4d9ad442': {}
});
</script>

@ -0,0 +1,66 @@
<template>
<div class="hw-input" @click.stop="inputClick"
:style="`background-color: ${(selectUuid === options.uuid) ? '#0001':'#0000'};border-color: ${(selectUuid === options.uuid) ? '#00afff':'#0000'}`">
<tool v-if="selectUuid === options.uuid" :options="options" />
<Chart ref="chartRef" />
</div>
</template>
<script lang="ts" setup>
import tool from './tool.vue';
import Chart from '@/components/Draggable/chart.vue';
import { inject } from 'vue';
defineOptions({
name: 'hw-chart'
});
const chartRef = ref();
const props = defineProps({
options: Object,
formData: Object
});
onMounted(() => {
chartRef.value.setData({
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
data: [150, 230, 224, 218, 135, 147, 260],
type: 'line'
}
]
});
});
const { options, formData } = toRefs(props);
const getOptions = inject('getOptions');
const selectUuid = inject('selectUuid');
const getSelectUuid = inject('getSelectUuid');
const inputClick = () => {
getOptions(options.value);
getSelectUuid(options.value.uuid);
};
</script>
<style scoped lang="less">
.hw-input {
margin: 2px;
border: 1px solid #0000;
position: relative;
padding: 12px 2px 2px;
&:hover {
background-color: #0001;
border: 1px solid #00afff;
}
}
</style>

@ -2,6 +2,9 @@
import hwInput from './hw-input.vue';
import hwInputNumber from './hw-input-number.vue';
import hwTable from './hw-table.vue';
import hwChart from './hw-chart.vue';
import hwSlider from './hw-slider.vue';
import hwRadioGroup from './hw-radio-group.vue';
import tool from './tool.vue';
export default {
@ -10,6 +13,9 @@ export default {
hwInput,
hwInputNumber,
hwTable,
hwChart,
hwSlider,
hwRadioGroup,
tool
}
};

@ -0,0 +1,51 @@
<template>
<div class="hw-input" @click.stop="inputClick"
:style="`background-color: ${(selectUuid === options.uuid) ? '#0001':'#0000'};border-color: ${(selectUuid === options.uuid) ? '#00afff':'#0000'}`">
<tool v-if="selectUuid === options.uuid" :options="options" />
<el-form-item :label="options.name" :required="options.required">
<el-radio-group v-model="formData[options.key || ('radio-group-'+options.uuid)]" :disabled="options.disabled">
<el-radio :value="3">Option A</el-radio>
<el-radio :value="6">Option B</el-radio>
<el-radio :value="9">Option C</el-radio>
</el-radio-group>
</el-form-item>
</div>
</template>
<script lang="ts" setup>
import tool from './tool.vue';
import { inject } from 'vue';
defineOptions({
name: 'hw-radio-group'
});
const props = defineProps({
options: Object,
formData: Object
});
const { options, formData } = toRefs(props);
const getOptions = inject('getOptions');
const selectUuid = inject('selectUuid');
const getSelectUuid = inject('getSelectUuid');
const inputClick = () => {
getOptions(options.value);
getSelectUuid(options.value.uuid);
};
</script>
<style scoped lang="less">
.hw-input {
margin: 2px;
border: 1px solid #0000;
position: relative;
padding: 12px 2px 2px;
&:hover {
background-color: #0001;
border: 1px solid #00afff;
}
}
</style>

@ -0,0 +1,48 @@
<template>
<div class="hw-input" @click.stop="inputClick"
:style="`background-color: ${(selectUuid === options.uuid) ? '#0001':'#0000'};border-color: ${(selectUuid === options.uuid) ? '#00afff':'#0000'}`">
<tool v-if="selectUuid === options.uuid" :options="options" />
<el-form-item :label="options.name" :required="options.required">
<el-slider v-model="formData[options.key || ('slider-'+options.uuid)]" :disabled="options.disabled"
/>
</el-form-item>
</div>
</template>
<script lang="ts" setup>
import tool from './tool.vue';
import { inject } from 'vue';
defineOptions({
name: 'hw-slider'
});
const props = defineProps({
options: Object,
formData: Object
});
const { options, formData } = toRefs(props);
const getOptions = inject('getOptions');
const selectUuid = inject('selectUuid');
const getSelectUuid = inject('getSelectUuid');
const inputClick = () => {
getOptions(options.value);
getSelectUuid(options.value.uuid);
};
</script>
<style scoped lang="less">
.hw-input {
margin: 2px;
border: 1px solid #0000;
position: relative;
padding: 12px 2px 2px;
&:hover {
background-color: #0001;
border: 1px solid #00afff;
}
}
</style>

@ -27,7 +27,6 @@ const getFormCode = (data) => {
// code += `<el-form-item label="${formData.options.name || ''}" required="${formData.options.required}">`;
addCode(`<el-form-item label="${formData.options.name || ''}" required="${formData.options.required}">`);
} else {
console.log(123123);
// code += `<div> `;
addCode(`<div> `);
}
@ -36,19 +35,24 @@ const getFormCode = (data) => {
addCode(`<el-form :model="pageForm['${formData.options.key || ('form-' + formData.options.uuid)}']" label-width="${formData.options.labelWidth}" >`);
formData.tasks.forEach(task => {
console.log(task);
if (task.type === 'hw-form') {
getFormCode({
isForm: true, formData: formData, elementData: task, tier
});
} else {
elementEnum[task.type]({
const noFun = () => {
};
(elementEnum[task.type] || noFun)({
isForm: true, formData: formData, elementData: task, tier
});
}
});
// code += `</el-form>`;
addCode(` <el-form-item>
<el-button type="primary" >${formData.options.submitBottomName}</el-button>
<el-button>${formData.options.resetBottomName}</el-button>
</el-form-item>`);
addCode(`</el-form>`);
if (isForm) {
// code += `</el-form-item>`;

@ -15,9 +15,10 @@ const elementEnum = {
const exportConfig = (e) => {
reset();
console.log(e);
const noFun = () => {
};
e.map(v => {
elementEnum[v.type]({
(elementEnum[v.type] || noFun)({
isForm: false, elementData: v, formData: {}
});
});

@ -15,7 +15,6 @@ let variablesStructure = {};
const addVariables = (tier, key, type) => {
debugger
let obj = variablesStructure;
if (tier.length > 0) {
tier.forEach((t) => {

@ -3,6 +3,9 @@ import hwInputView from './viewElements/hw-input-view.vue';
import hwInputNumberView from './viewElements/hw-input-number-view.vue';
import hwFormView from './viewElements/hw-form-view.vue';
import hwTableView from './viewElements/hw-table-view.vue';
import hwChartView from './viewElements/hw-chart-view.vue';
import hwSliderView from './viewElements/hw-slider-view.vue';
import hwRadioGroupView from './viewElements/hw-radio-group-view.vue';
export default {
name: 'hw-form',
@ -10,7 +13,10 @@ export default {
hwInputView,
hwInputNumberView,
hwFormView,
hwTableView
hwTableView,
hwChartView,
hwSliderView,
hwRadioGroupView
}
};
</script>

@ -178,6 +178,15 @@ const dragViewList = [
},
name: '表格',
id: 101
},
{
type: 'hw-chart',
isContainer: false,
options: {
name: '图表'
},
name: '图表',
id: 101
}
];
@ -221,21 +230,6 @@ const exportFile = () => {
console.log(data);
};
// const
const aa = ref({ a: 1 });
const bb = (v) => {
console.log(v);
v.a += 1;
console.log(v);
};
setTimeout(() => {
bb(aa.value);
setTimeout(() => {
console.log(aa.value);
}, 100);
}, 100);
</script>
<style scoped>
.model {

@ -3,6 +3,9 @@ import hwInput from './elements/hw-input.vue';
import hwInputNumber from './elements/hw-input-number.vue';
import hwTable from './elements/hw-table.vue';
import hwForm from './elements/hw-form.vue';
import hwChart from './elements/hw-chart.vue';
import hwSlider from './elements/hw-slider.vue';
import hwRadioGroup from './elements/hw-radio-group.vue';
export default {
name: 'nested-draggable',
@ -10,7 +13,10 @@ export default {
hwInput,
hwInputNumber,
hwTable,
hwForm
hwForm,
hwChart,
hwSlider,
hwRadioGroup
}
};
</script>

@ -47,7 +47,8 @@
</el-button>
</el-form-item>
</template>
<script lang="ts" setup>import {
<script lang="ts" setup>
import {
Delete
} from '@element-plus/icons-vue';

@ -0,0 +1,43 @@
<template>
<el-form-item :label="options.name" :required="options.required">
<Chart ref="chartRef" />
</el-form-item>
</template>
<script lang="ts" setup>
import Chart from '@/components/Draggable/chart.vue';
defineOptions({
name: 'hw-input-view'
});
const chartRef = ref();
const props = defineProps({
options: Object,
formData: Object
});
onMounted(() => {
chartRef.value.setData({
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
data: [150, 230, 224, 218, 135, 147, 260],
type: 'line'
}
]
});
});
const { options, formData } = toRefs(props);
</script>
<style scoped lang="less">
</style>

@ -2,13 +2,19 @@
import hwInputView from './hw-input-view.vue';
import hwInputNumberView from './hw-input-number-view.vue';
import hwTableView from './hw-table-view.vue';
import hwChartView from './hw-chart-view.vue';
import hwSliderView from './hw-slider-view.vue';
import hwRadioGroupView from './hw-radio-group-view.vue';
export default {
name: 'hw-form-view',
components: {
hwInputView,
hwTableView,
hwInputNumberView
hwInputNumberView,
hwChartView,
hwSliderView,
hwRadioGroupView
}
};
</script>

@ -0,0 +1,26 @@
<template>
<el-form-item :label="options.name" :required="options.required">
<el-radio-group v-model="formData[options.key || ('radio-group-'+options.uuid)]" :disabled="options.disabled">
<el-radio :value="3">Option A</el-radio>
<el-radio :value="6">Option B</el-radio>
<el-radio :value="9">Option C</el-radio>
</el-radio-group>
</el-form-item>
</template>
<script lang="ts" setup>
defineOptions({
name: 'hw-input-view'
});
const props = defineProps({
options: Object,
formData: Object
});
const { options, formData } = toRefs(props);
</script>
<style scoped lang="less">
</style>

@ -0,0 +1,23 @@
<template>
<el-form-item :label="options.name" :required="options.required">
<el-slider v-model="formData[options.key || ('slider-'+options.uuid)]" :disabled="options.disabled"
/>
</el-form-item>
</template>
<script lang="ts" setup>
defineOptions({
name: 'hw-slider-view'
});
const props = defineProps({
options: Object,
formData: Object
});
const { options, formData } = toRefs(props);
</script>
<style scoped lang="less">
</style>
Loading…
Cancel
Save