Merge branch 'dev' of http://124.70.149.18:10880/lianghj/queenshow into dev

src/modules/editor/components/CompUI/basicUI/Polygon/toolbar.tsx

@@ -4,7 +4,7 @@ import { Button, Divider, InputNumber, Select } from "ant-design-vue";
 import { defineComponent, reactive , effect, watch} from "vue";
 import { any, array } from "vue-types";
 
-import ToolbarsUI from "../../formItems/ToolbarsUI";
+import ToolbarsUI from "./toolbarUI";
 import Slider from "../../formItems/Slider";
 import { ToolbarItem } from "@/modules/editor/objects/Toolbars/default";
 import _ from "lodash";
@@ -20,12 +20,12 @@ const PointsComp = defineComponent({
     setup(props, { emit }) {
         const state = reactive({ index: 0 })
 
-        watch(()=>props.value.index, ()=>{
-            state.index = props.value.index;
+        watch(()=>props.value?.index, ()=>{
+            state.index = props.value?.index || 0;
         })
 
         return () => {
-            const options = props.value.points.map((item, index) => { return { label: "顶点" + (index + 1), value: index } });
+            const options = props.value?.points.map((item, index) => { return { label: "顶点" + (index + 1), value: index } }) || [];
             return (
                 <div class="flex items-center">
                     <Select class="w-82px" value={state.index} options={options} onChange={v => {
@@ -33,7 +33,7 @@ const PointsComp = defineComponent({
                     }}>
                     </Select>
                     {
-                        props.value.points.length > 0 && <>
+                        props.value?.points.length > 0 && <>
                            <span class="ml-10px">X:</span> <Slider class="w-140px" value={props.value.points[state.index][0]} min={0} max={1} step={0.01} onChange={(v) => {
                                 const ps = props.value.points.slice(0);
                                 ps[state.index][0] = v;

src/modules/editor/components/CompUI/basicUI/Polygon/toolbarUI.tsx

@@ -0,0 +1,159 @@
+import { css, cx } from "@linaria/core";
+import { Tooltip } from "ant-design-vue";
+import _ from "lodash";
+import { computed, defineComponent } from "vue";
+import { any, array, bool, func } from "vue-types";
+
+export interface ColumnItem {
+  label?: string;
+  component?: ((...args: any[]) => any) | Record<string, any>;
+  dataIndex?: string;
+  setterIndex?: string;
+  props?: { [name: string]: any };
+  itemProps?: { [name: string]: any };
+  getValue?: (v: any, data?: any) => any;
+  isDisable?: (value: any, data: any) => boolean;
+  isLoading?: (value: any, data: any) => boolean;
+  isVisible?: (value: any, data: any) => boolean;
+  changeExtra?: (data: any) => any;
+  children?: ColumnItem[];
+}
+
+export default defineComponent({
+  props: {
+    columns: array<ColumnItem>().isRequired,
+    editor: any(),
+    data: any().isRequired,
+    disabled: bool(),
+    onChange: func(),
+    onChangeEnd: func(),
+  },
+  setup(props) {
+    return () => <FormUI {...props} />;
+  },
+});
+
+const FormUI = (props: {
+  columns: ColumnItem[];
+  data: any;
+  editor: any;
+  disabled?: boolean;
+  onChange?: (...arg: any) => void;
+  onChangeEnd?: (...arg: any) => void;
+}) => {
+  const { columns, ...restProps } = props;
+  return (
+    <>
+      {columns?.map((column: ColumnItem, index: number) => {
+        if (!column.dataIndex) {
+          return renderUI({ props: restProps, column, index });
+        }
+        return renderFormItem({ column, ...restProps, index });
+      })}
+    </>
+  );
+};
+
+const renderUI = ({ props, column, index }: any) => {
+  const component = column.component;
+  if (component instanceof Function) {
+    const params: any = {
+      ...props,
+      column,
+      key: index,
+      children: FormUI({ ...props, columns: column.children }),
+    };
+    return component(params);
+  } else {
+    return (
+      <component {...props} column={column} key={index}>
+        <FormUI {...props} columns={column.children} />
+      </component>
+    );
+  }
+};
+
+export const renderFormItem = (props: {
+  column: ColumnItem;
+  index?: number;
+  data: any;
+  editor: any;
+  disabled?: boolean;
+  onChange?: (...arg: any) => void;
+  onChangeEnd?: (...arg: any) => void;
+}) => {
+  const { column, data, index, onChange, onChangeEnd } = props;
+
+  const compValue = computed(() => {
+    const { data, column } = props;
+    if (!column.dataIndex) return;
+    const itemValue = _.get(data, column.dataIndex);
+    return column.getValue ? column.getValue(itemValue, data) : itemValue;
+  });
+  
+  const changeVal = (value: any, ...args: any[]) => {
+    const { column } = props;
+    let params = {
+      dataIndex: column.dataIndex,
+      setterIndex: column.setterIndex,
+      value,
+      ...args,
+    };
+    if (column.changeExtra) params = column.changeExtra?.(params);
+    onChange?.(params);
+    return params;
+  };
+
+  const changeValEnd = (value: any, ...args: any[]) => {
+    const params = changeVal(value, ...args);
+    onChangeEnd?.(params);
+  };
+
+  // const isVisible = column.isVisible?.(compValue.value, data);
+  // if (column.isVisible && !isVisible) return null;
+
+  // const disabled = props.disabled || column.isDisable?.(compValue.value, data);
+
+  const component = column.component;
+
+  return (
+    <div
+      key={index}
+      class={formItemStyles}
+      {...column.itemProps}
+      onClick={(e) => e.stopPropagation()}
+    >
+      {column.label ? (
+        <Tooltip title={column.label} placement="top">
+          <component
+            value={compValue.value}
+            {...column.props}
+            loading={column.isLoading?.(compValue.value, data)}
+            onChange={changeVal}
+            onChangeEnd={changeValEnd}
+          />
+        </Tooltip>
+      ) : (
+        <component
+          value={compValue.value}
+          {...column.props}
+          loading={column.isLoading?.(compValue.value, data)}
+          onChange={changeVal}
+          onChangeEnd={changeValEnd}
+        />
+      )}
+    </div>
+  );
+};
+
+const formItemStyles = css`
+  height: 100%;
+  margin: 0 6px;
+  &.disabled {
+    cursor: not-allowed;
+  }
+`;
+
+export function useFormColumns(columns: ColumnItem[]) {
+  return columns;
+}