| | |
| | | --> |
| | | <template> |
| | | <div class="properties-content"> |
| | | <div class="properties-body" v-if="itemProps"> |
| | | <Empty class="hint-box" v-if="!itemProps" description="未选择控件" /> |
| | | <Form v-else label-align="left" layout="vertical"> |
| | | <div v-for="item of baseFormItemProps" :key="item.name"> |
| | | <FormItem :label="item.label" v-if="showProps(item.exclude)"> |
| | | <component |
| | | class="component-props" |
| | | v-bind="item.componentProps" |
| | | :is="item.component" |
| | | v-model:value="formConfig.currentItem[item.name]" |
| | | /> |
| | | </FormItem> |
| | | </div> |
| | | </Form> |
| | | </div> |
| | | <Form class="properties-body" label-align="left" layout="vertical"> |
| | | <FormItem label="工艺路线编码" name="工艺路线编码"> |
| | | <Input |
| | | :style="{ width: '100%' }" |
| | | v-model:value="routeConfig.currentItem.ROT_CODE" |
| | | :min="0" |
| | | :step="1" |
| | | :readonly="true" |
| | | /> |
| | | </FormItem> |
| | | <FormItem label="节点编码" name="节点编码"> |
| | | <Input |
| | | :style="{ width: '100%' }" |
| | | v-model:value="routeConfig.currentItem.NODE_CODE" |
| | | :min="0" |
| | | :step="1" |
| | | /> |
| | | </FormItem> |
| | | <FormItem label="节点名称" name="节点名称"> |
| | | <Input |
| | | :style="{ width: '100%' }" |
| | | v-model:value="routeConfig.currentItem.NODE_NAME" |
| | | :min="0" |
| | | :step="1" |
| | | /> |
| | | </FormItem> |
| | | <FormItem label="工序编码" name="工序编码"> |
| | | <Input |
| | | :style="{ width: '100%' }" |
| | | v-model:value="routeConfig.currentItem.OPER_CODE" |
| | | :min="0" |
| | | :step="1" |
| | | /> |
| | | </FormItem> |
| | | <FormItem label="是否启用" name="是否启用"> |
| | | <Select |
| | | ref="select" |
| | | v-model:value="routeConfig.currentItem.IS_ACTIVE" |
| | | style="width: 120px" |
| | | :options="options1" |
| | | :readonly="true" |
| | | /> |
| | | </FormItem> |
| | | </Form> |
| | | </div> |
| | | </template> |
| | | <script lang="ts" setup> |
| | | import { computed, ref, watch } from 'vue'; |
| | | import { Empty, Input, Form, FormItem, Switch, Checkbox, Col } from 'ant-design-vue'; |
| | | import { Select, Input, Form, FormItem } from 'ant-design-vue'; |
| | | import { useRouteDesignState } from '../hooks/useRouteDesignState'; |
| | | import { SelectTypes } from 'ant-design-vue/es/select'; |
| | | import { ref } from 'vue'; |
| | | |
| | | const itemProps = ref(true); |
| | | const baseFormItemProps = ref([]); |
| | | // watch( |
| | | // () => formConfig.value, |
| | | // () => { |
| | | // if (formConfig.value.currentItem) { |
| | | // formConfig.value.currentItem.itemProps = formConfig.value.currentItem.itemProps || {}; |
| | | // formConfig.value.currentItem.itemProps.labelCol = |
| | | // formConfig.value.currentItem.itemProps.labelCol || {}; |
| | | // formConfig.value.currentItem.itemProps.wrapperCol = |
| | | // formConfig.value.currentItem.itemProps.wrapperCol || {}; |
| | | // } |
| | | // }, |
| | | // { deep: true, immediate: true }, |
| | | // ); |
| | | // const showProps = (exclude: string[] | undefined) => { |
| | | // if (!exclude) { |
| | | // return true; |
| | | // } |
| | | // return isArray(exclude) ? !exclude.includes(formConfig.value.currentItem!.component) : true; |
| | | // }; |
| | | |
| | | // const controlPropsList = computed(() => { |
| | | // return baseFormItemControlAttrs.filter((item) => { |
| | | // return showProps(item.exclude); |
| | | // }); |
| | | // }); |
| | | const { routeConfig } = useRouteDesignState(); |
| | | const options1 = ref<SelectTypes['options']>([ |
| | | { |
| | | value: 'Y', |
| | | label: '启用', |
| | | }, |
| | | { |
| | | value: 'N', |
| | | label: '不启用', |
| | | }, |
| | | ]); |
| | | </script> |