工单管理增加取消下发功能

Ben Lin

2024-08-22 ec0d91353b767f089fa72f3cd1eb62568852710b

 src/views/form-design/components/VFormDesign/components/FormItemProps.vue

@@ -9,6 +9,7 @@
        <div v-for="item of baseFormItemProps" :key="item.name">
          <FormItem :label="item.label" v-if="showProps(item.exclude)">
            <component
              v-if="item.component"
              class="component-props"
              v-bind="item.componentProps"
              :is="item.component"
@@ -19,6 +20,7 @@
        <div v-for="item of advanceFormItemProps" :key="item.name">
          <FormItem :label="item.label" v-if="showProps(item.exclude)">
            <component
              v-if="item.component"
              class="component-props"
              v-bind="item.componentProps"
              :is="item.component"
@@ -28,6 +30,7 @@
        ><div v-for="item of advanceFormItemColProps" :key="item.name">
          <FormItem :label="item.label" v-if="showProps(item.exclude)">
            <component
              v-if="item.component"
              class="component-props"
              v-bind="item.componentProps"
              :is="item.component"
@@ -61,8 +64,8 @@
    </div>
  </div>
</template>
<script lang="ts">
  import { computed, defineComponent, watch } from 'vue';
<script lang="ts" setup name="FormItemProps">
  import { computed, watch } from 'vue';
  import {
    baseFormItemControlAttrs,
    baseFormItemProps,
@@ -70,76 +73,36 @@
    advanceFormItemColProps,
  } from '../../VFormDesign/config/formItemPropsConfig';

  import {
    Empty,
    Input,
    Form,
    FormItem,
    Switch,
    Checkbox,
    Select,
    Slider,
    Col,
    RadioGroup,
  } from 'ant-design-vue';
  import { Empty, Input, Form, FormItem, Switch, Checkbox, Col } from 'ant-design-vue';
  import RuleProps from './RuleProps.vue';
  import { useFormDesignState } from '../../../hooks/useFormDesignState';
  import { isArray } from 'lodash-es';

  export default defineComponent({
    name: 'FormItemProps',
    components: {
      RuleProps,
      Empty,
      Input,
      Form,
      FormItem,
      Switch,
      Checkbox,
      Select,
      Slider,
      Col,
      RadioGroup,
  const { formConfig } = useFormDesignState();

  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 || {};
      }
    },
    // props: {} as PropsOptions,
    { deep: true, immediate: true },
  );
  const showProps = (exclude: string[] | undefined) => {
    if (!exclude) {
      return true;
    }
    return isArray(exclude) ? !exclude.includes(formConfig.value.currentItem!.component) : true;
  };

    setup() {
      const { formConfig } = useFormDesignState();

      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);
        });
      });

      return {
        baseFormItemProps,
        advanceFormItemProps,
        advanceFormItemColProps,
        formConfig,
        controlPropsList,
        showProps,
      };
    },
  const controlPropsList = computed(() => {
    return baseFormItemControlAttrs.filter((item) => {
      return showProps(item.exclude);
    });
  });
</script>