增加车间监控界面

baoshiwei

2023-05-24 beca65f4d01ca07c358102a35b949c2a4f277afe

 src/views/demo/form/index.vue

@@ -47,35 +47,35 @@
  </PageWrapper>
</template>
<script lang="ts">
  import { computed, defineComponent, unref, ref } from 'vue';
  import { BasicForm, FormSchema, ApiSelect, JAreaLinkage } from '/@/components/Form/index';
  import { CollapseContainer } from '/@/components/Container';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { PageWrapper } from '/@/components/Page';
   import { computed, defineComponent, unref, ref } from 'vue'
   import { BasicForm, FormSchema, ApiSelect, JAreaLinkage } from '/@/components/Form/index'
   import { CollapseContainer } from '/@/components/Container'
   import { useMessage } from '/@/hooks/web/useMessage'
   import { PageWrapper } from '/@/components/Page'

  import { optionsListApi } from '/@/api/demo/select';
  import { useDebounceFn } from '@vueuse/core';
  import { treeOptionsListApi } from '/@/api/demo/tree';
  import { Select } from 'ant-design-vue';
  import { cloneDeep } from 'lodash-es';
   import { optionsListApi } from '/@/api/demo/select'
   import { useDebounceFn } from '@vueuse/core'
   import { treeOptionsListApi } from '/@/api/demo/tree'
   import { Select } from 'ant-design-vue'
   import { cloneDeep } from 'lodash-es'

  const valueSelectA = ref<string[]>([]);
  const valueSelectB = ref<string[]>([]);
  const options = ref<Recordable[]>([]);
  for (let i = 1; i < 10; i++) options.value.push({ label: '选项' + i, value: `${i}` });
   const valueSelectA = ref<string[]>([])
   const valueSelectB = ref<string[]>([])
   const options = ref<Recordable[]>([])
   for (let i = 1; i < 10; i++) options.value.push({ label: '选项' + i, value: `${i}` })

  const optionsA = computed(() => {
    return cloneDeep(unref(options)).map((op) => {
      op.disabled = unref(valueSelectB).indexOf(op.value) !== -1;
      return op;
    });
  });
         op.disabled = unref(valueSelectB).indexOf(op.value) !== -1
         return op
      })
   })
  const optionsB = computed(() => {
    return cloneDeep(unref(options)).map((op) => {
      op.disabled = unref(valueSelectA).indexOf(op.value) !== -1;
      return op;
    });
  });
         op.disabled = unref(valueSelectA).indexOf(op.value) !== -1
         return op
      })
   })
  const provincesOptions = [
    {
      id: 'guangdong',
@@ -89,7 +89,7 @@
      value: '2',
      key: '2',
    },
  ];
   ]
  const citiesOptionsData = {
    guangdong: [
      {
@@ -125,7 +125,7 @@
        key: '3',
      },
    ],
  };
   }

  const schemas: FormSchema[] = [
    {
@@ -144,20 +144,20 @@
      // componentProps:{},
      // can func
      componentProps: ({ schema, formModel }) => {
        console.log('form:', schema);
        console.log('formModel:', formModel);
            console.log('form:', schema)
            console.log('formModel:', formModel)
        return {
          placeholder: '自定义placeholder',
          onChange: (e: any) => {
            console.log(e);
                  console.log(e)
          },
        };
            }
      },
      renderComponentContent: () => {
        return {
          prefix: () => 'pSlot',
          suffix: () => 'sSlot',
        };
            }
      },
    },
    {
@@ -170,7 +170,7 @@
      },
      componentProps: {
        onChange: (e: any) => {
          console.log(e);
               console.log(e)
        },
      },
      suffix: '天',
@@ -350,11 +350,11 @@
        // not request untill to select
        immediate: false,
        onChange: (e) => {
          console.log('selected:', e);
               console.log('selected:', e)
        },
        // atfer request callback
        onOptionsChange: (options) => {
          console.log('get options', options.length, options);
               console.log('get options', options.length, options)
        },
      },
      colProps: {
@@ -474,21 +474,21 @@
          placeholder: '省份与城市联动',
          onChange: (e: any) => {
            // console.log(e)
            let citiesOptions = e == 1 ? citiesOptionsData[provincesOptions[0].id] : citiesOptionsData[provincesOptions[1].id];
                  let citiesOptions = e == 1 ? citiesOptionsData[provincesOptions[0].id] : citiesOptionsData[provincesOptions[1].id]
            // console.log(citiesOptions)
            if (e === undefined) {
              citiesOptions = [];
                     citiesOptions = []
            }
            formModel.city = undefined; //  reset city value
            const { updateSchema } = formActionType;
                  formModel.city = undefined //  reset city value
                  const { updateSchema } = formActionType
            updateSchema({
              field: 'city',
              componentProps: {
                options: citiesOptions,
              },
            });
                  })
          },
        };
            }
      },
    },
    {
@@ -573,7 +573,7 @@
        allowHalf: true,
      },
    },
  ];
   ]

  export default defineComponent({
    components: {
@@ -585,18 +585,18 @@
      ASelect: Select,
    },
    setup() {
      const check = ref(null);
      const { createMessage } = useMessage();
      const keyword = ref<string>('');
         const check = ref(null)
         const { createMessage } = useMessage()
         const keyword = ref<string>('')
      const searchParams = computed<Recordable>(() => {
        return { keyword: unref(keyword) };
      });
            return { keyword: unref(keyword) }
         })

      function onSearch(value: string) {
        keyword.value = value;
            keyword.value = value
      }
      function areaChange(value) {
        alert(value);
            alert(value)
      }

      return {
@@ -609,13 +609,13 @@
        onSearch: useDebounceFn(onSearch, 300),
        searchParams,
        handleReset: () => {
          keyword.value = '';
               keyword.value = ''
        },
        handleSubmit: (values: any) => {
          createMessage.success('click search,values:' + JSON.stringify(values));
               createMessage.success('click search,values:' + JSON.stringify(values))
        },
        check,
      };
         }
    },
  });
   })
</script>