选择渲染模板

src/pages/website/CreateMat/components/Header.tsx

@@ -12,8 +12,8 @@ export default defineComponent({
 
     const showModal = () => {
       resource.showModal(<OutputTemplateModal />, {
-        title: "选择模板",
-        width: "900px",
+        title: "选择渲染模板",
+        width: "1000px",
       });
     };
 

src/pages/website/CreateMat/components/OutputTemplateItem.tsx

@@ -0,0 +1,77 @@
+import { css, cx } from "@linaria/core";
+import { Image, View } from "@queenjs/ui";
+import { Checkbox, Radio, RadioChangeEvent } from "ant-design-vue";
+import { defineUI } from "queenjs";
+import { reactive } from "vue";
+import { any, bool } from "vue-types";
+
+const options = [
+  { label: "1倍", value: 1 },
+  { label: "2倍", value: 2 },
+];
+
+export default defineUI({
+  props: {
+    active: bool(),
+    record: any(),
+  },
+  emits: ["select", "change"],
+  setup(props, { emit }) {
+    const state = reactive({
+      qos: 1,
+    });
+
+    const change = (e: RadioChangeEvent) => {
+      state.qos = e.target.value;
+      emit("change", state.qos);
+    };
+
+    return () => {
+      const { active, record } = props;
+      //   console.log("record: ", record);
+      return (
+        <div>
+          <View
+            ratio={1.4}
+            onClick={() => emit("select")}
+            class={cx(
+              itemStyles,
+              "overflow-hidden",
+              "relative",
+              active && "active"
+            )}
+          >
+            {active && (
+              <Checkbox
+                checked
+                class="!-mt-0.2em absolute top-0 left-0 text-20px text-red-200 z-3"
+              />
+            )}
+            <Image class="h-1/1 w-1/1" src={record?.thumbnailUrl} />
+          </View>
+          <div>
+            <div class="py-8px">
+              尺寸：{record.width} * {record.height}
+            </div>
+            <div>
+              渲染分辨率：
+              <Radio.Group
+                disabled={!props.active}
+                value={state.qos}
+                options={options}
+                onChange={change}
+              />
+            </div>
+          </div>
+        </div>
+      );
+    };
+  },
+});
+
+const itemStyles = css`
+  border: 1px solid transparent;
+  &.active {
+    border-color: @inf-primary-color;
+  }
+`;

src/pages/website/CreateMat/components/OutputTemplateModal.tsx

@@ -1,9 +1,9 @@
 import { useResource } from "@/modules/resource";
-import { List } from "@queenjs/ui";
 import { Button, Empty } from "ant-design-vue";
 import { queenApi, useModal } from "queenjs";
 import { defineComponent, reactive } from "vue";
 import { useRoute } from "vue-router";
+import OutputTemplateItem from "./OutputTemplateItem";
 
 export default defineComponent({
   setup() {
@@ -12,15 +12,19 @@ export default defineComponent({
     const route = useRoute();
 
     const state = reactive({
-      list: [] as {id: string, qos:1}[],
+      list: [] as { id: string; qos: 1 }[],
     }) as any;
 
-    const submit =async () => {
+    const submit = async () => {
       if (state.list.length == 0) {
         queenApi.messageError("请选择至少一个模板");
         return;
       }
-      const isOk = await resource.actions.submitRender(route.params.id as string, state.list, []);
+      const isOk = await resource.actions.submitRender(
+        route.params.id as string,
+        state.list,
+        []
+      );
       if (isOk) {
         modal.submit(true);
       }
@@ -29,33 +33,39 @@ export default defineComponent({
     return () => {
       return (
         <div>
-          <List data={resource.store.sourceDetail.images} columns={5}>
-            {{
-              item: (record: any) => {
-                return (
-                  <resource.components.MaterialItem
-                    record={record}
-                    class="cursor-pointer"
-                    active={ !!(state.list.find((v:any)=>v.id == record.id))}
-                    onSelect={() => {
-                      const selected =  !!(state.list.find((v:any)=>v.id == record.id))
-                      if (selected) {
-                        const index = state.list.findIndex(
-                          (d: any) => d.id == record.id
-                        );
-                        state.list.splice(index);
-                        return;
-                      }
-                      state.list.push({id: record.id, qos:1});
-                    }}
-                  />
-                );
-              },
-              empty: () => <Empty description="暂无数据" />,
-            }}
-          </List>
+          {resource.store.sourceDetail.images.length == 0 && (
+            <Empty description="暂无数据" />
+          )}
+          <div class="grid grid-cols-4 gap-10px">
+            {resource.store.sourceDetail.images.map((record: any) => (
+              <OutputTemplateItem
+                record={record}
+                class="cursor-pointer"
+                active={!!state.list.find((v: any) => v.id == record.id)}
+                onChange={(qos) => {
+                  const selected = state.list.find(
+                    (v: any) => v.id == record.id
+                  );
+                  selected.qos = qos;
+                }}
+                onSelect={() => {
+                  const selected = !!state.list.find(
+                    (v: any) => v.id == record.id
+                  );
+                  if (selected) {
+                    const index = state.list.findIndex(
+                      (d: any) => d.id == record.id
+                    );
+                    state.list.splice(index);
+                    return;
+                  }
+                  state.list.push({ id: record.id, qos: 1 });
+                }}
+              />
+            ))}
+          </div>
 
-          <div class="text-right">
+          <div class="text-right mt-10px">
             <Button onClick={modal.cancel}>取消</Button>
             <Button type="primary" class="ml-20px" onClick={submit}>
               确定