使用tanstack/vue-query

2024-09-19 19:27:55 +08:00
parent 13b57fa2ed
commit 2866a07493
12 changed files with 440 additions and 337 deletions
--- a/cdTMP/src/components/ma-crud/types/crud.ts
+++ b/cdTMP/src/components/ma-crud/types/crud.ts
@@ -64,7 +64,7 @@ export interface BasicCrud {
    isFull?: boolean;
  };
  //新增确定之前修改form值
-  beforeAdd?: (form) => void;
+  beforeAdd?: (form) => boolean;
  //新增确定之后调用,返回接口response和form值
  afterAdd?: (response, form) => void;
  //编辑确定之前修改form值
@@ -113,7 +113,7 @@ export interface BasicCrud {
    realRole?: string[];
    // 真实按钮文案
    realText?: string;
-    
+
    // 是否显示
    show?: boolean;
  };
--- a/cdTMP/src/components/ma-form/containerItem/children-form.vue
+++ b/cdTMP/src/components/ma-form/containerItem/children-form.vue
@@ -38,6 +38,17 @@
            >
                <template #extra>
                    <a-space>
+                        <a-tooltip content="复制该项添加" v-if="!(props.component.hideAdd ?? false)">
+                            <a-button
+                                @click.stop="addItem(item)"
+                                type="primary"
+                                size="small"
+                                shape="round"
+                                status="warning"
+                            >
+                                <template #icon><icon-copy /></template>
+                            </a-button>
+                        </a-tooltip>
                        <a-tooltip content="添加新子项" v-if="!(props.component.hideAdd ?? false)">
                            <a-button @click.stop="addItem()" type="primary" size="small" shape="round">
                                <template #icon><icon-plus /></template>
--- a/cdTMP/src/components/ma-info/index.vue
+++ b/cdTMP/src/components/ma-info/index.vue
@@ -1,122 +1,142 @@
 <template>
-  <a-space direction="vertical" size="large" fill>
-    <a-descriptions
-      :data="descriptions"
-      :column="props.column"
-      :title="props.title"
-      :layout="props.layout"
-      :bordered="props.bordered"
-      table-layout="fixed"
-      :size="props.size"
-      :label-style="props.labelStyle"
-      :value-style="props.valueStyle"
-    >
-      <a-descriptions-item v-for="item in descriptions" :label="item.label">
-        <template v-if="item.formType === 'upload'">
-          <a-image-preview-group infinite v-if="isArray(item.value)">
-            <a-space>
-              <a-image v-for="src in item.value" :src="tool.viewImage(src)" width="50" />
-            </a-space>
-          </a-image-preview-group>
-          <a-image v-else :src="tool.viewImage(item.value)" width="50"></a-image>
-        </template>
-        <template v-else-if="item.infoSlot">
-          <slot :name="item.dataIndex" :row="item" :data="data"></slot>
-        </template>
-        <template v-else-if="item.formType === 'radio' || item.formType === 'select'">
-          <a-tag color="blue">{{
-            item.dict.data.find((row) => row.value == item.value)?.label
-          }}</a-tag>
-        </template>
-        <div v-else>{{ item.value }} {{ item?.textAppend }}</div>
-      </a-descriptions-item>
-    </a-descriptions>
-  </a-space>
+    <a-space direction="vertical" size="large" fill>
+        <a-descriptions
+            :data="descriptions"
+            :column="props.column"
+            :title="props.title"
+            :layout="props.layout"
+            :bordered="props.bordered"
+            table-layout="fixed"
+            :size="props.size"
+            :label-style="props.labelStyle"
+            :value-style="props.valueStyle"
+        >
+            <a-descriptions-item
+                v-for="item in descriptions"
+                :label="item.label"
+                :span="isArray(item.value) ? props.column : 1"
+            >
+                <template v-if="item.formType === 'upload'">
+                    <a-image-preview-group infinite v-if="isArray(item.value)">
+                        <a-space>
+                            <a-image v-for="src in item.value" :src="tool.viewImage(src)" width="50" />
+                        </a-space>
+                    </a-image-preview-group>
+                    <a-image v-else :src="tool.viewImage(item.value)" width="50"></a-image>
+                </template>
+                <template v-else-if="item.infoSlot">
+                    <slot :name="item.dataIndex" :row="item" :data="data"></slot>
+                </template>
+                <template
+                    v-else-if="item.formType === 'radio' || item.formType === 'select' || item.formType === 'checkbox'"
+                >
+                    <template v-if="isArray(item.value)">
+                        <!-- 修改源码 -->
+                        <a-space>
+                            <a-tag v-for="v in item.value" color="magenta">
+                                <template v-if="v.length > 0">
+                                    {{ item.dict.data.find((row) => row.value == v)?.label }}
+                                </template>
+                            </a-tag>
+                        </a-space>
+                    </template>
+                    <template v-else>
+                        <a-tag color="blue">
+                            {{ item.dict.data.find((row) => row.value == item.value)?.label }}
+                        </a-tag>
+                    </template>
+                </template>
+                <div v-else>{{ item.value }} {{ item?.textAppend }}</div>
+            </a-descriptions-item>
+        </a-descriptions>
+    </a-space>
 </template>

 <script setup>
-import { getCurrentInstance, inject, provide, ref, watch } from "vue";
-import tool from "@/utils/tool";
-import { get, isArray, isBoolean, isEmpty, isFunction } from "lodash-es";
-import { loadDict } from "@cps/ma-form/js/networkRequest.js";
-import globalColumn from "@/config/column.js";
+import { getCurrentInstance, inject, provide, ref, watch } from "vue"
+import tool from "@/utils/tool"
+import { get, isArray, isBoolean, isEmpty, isFunction } from "lodash-es"
+import { loadDict } from "@cps/ma-form/js/networkRequest.js"
+import globalColumn from "@/config/column.js"

-const dictList = {};
-const app = getCurrentInstance().appContext.app;
-const columns = ref([]);
-const data = ref({});
-const descriptions = ref([]);
-const dictData = ref([]);
+const dictList = {}
+const app = getCurrentInstance().appContext.app
+const columns = ref([])
+const data = ref({})
+const descriptions = ref([])
+const dictData = ref([])
 const props = defineProps({
-  columns: { type: Array, default: [] },
-  data: {},
-  column: { default: 3 },
-  title: {
-    default: "",
-  },
-  bordered: {
-    default: true,
-  },
-  layout: {
-    default: "vertical",
-  },
-  labelStyle: {
-    default: {},
-  },
-  valueStyle: {
-    default: {},
-  },
-  size: {
-    default: "large",
-  },
-});
+    columns: { type: Array, default: [] },
+    data: {},
+    column: { default: 3 },
+    title: {
+        default: ""
+    },
+    bordered: {
+        default: true
+    },
+    layout: {
+        default: "vertical"
+    },
+    labelStyle: {
+        default: {}
+    },
+    valueStyle: {
+        default: {}
+    },
+    size: {
+        default: "large"
+    }
+})

 watch(
-  () => props.columns,
-  (vl) => {
-    columns.value = vl;
-  },
-  { deep: true, immediate: true }
-);
+    () => props.columns,
+    (vl) => {
+        columns.value = vl
+    },
+    { deep: true, immediate: true }
+)

 const reset = async (vl) => {
-  data.value = vl;
-  descriptions.value = [];
-  if (!columns.value) {
-    return;
-  }
-  for (let item of columns.value) {
-    let value = null;
-    if (isEmpty(item) || item.dataIndex === "__operation" || item.infoShow === false) {
-      return;
+    data.value = vl
+    descriptions.value = []
+    if (!columns.value) {
+        return
    }
-    if (isBoolean(item.common) && item.common && globalColumn[item.dataIndex]) {
-      item = globalColumn[item.dataIndex];
+    for (let item of columns.value) {
+        let value = null
+        if (isEmpty(item) || item.dataIndex === "__operation" || item.infoShow === false) {
+            // return
+            // 上面是源码 -> 修改源码：源码错误!
+            continue
+        }
+        if (isBoolean(item.common) && item.common && globalColumn[item.dataIndex]) {
+            item = globalColumn[item.dataIndex]
+        }
+        if (item.dict) {
+            await loadDict(dictList, item)
+            item.dict.data = dictList[item.dataIndex] ?? []
+        }
+        if (isFunction(item.customRender)) {
+            value = item.customRender({ record: data.value })
+        }
+        descriptions.value.push({
+            ...item,
+            label: item.title,
+            value: value ?? get(data.value, item.dataIndex)
+        })
    }
-    if (item.dict) {
-      await loadDict(dictList, item);
-      item.dict.data = dictList[item.dataIndex] ?? [];
-    }
-    if (isFunction(item.customRender)) {
-      value = item.customRender({ record: data.value });
-    }
-    descriptions.value.push({
-      ...item,
-      label: item.title,
-      value: value ?? get(data.value, item.dataIndex),
-    });
-  };
-};
+}

 watch(
-  () => props.data,
-  (vl) => {
-    reset(vl);
-  },
-  { deep: true, immediate: true }
-);
+    () => props.data,
+    (vl) => {
+        reset(vl)
+    },
+    { deep: true, immediate: true }
+)

-defineExpose({ reset });
+defineExpose({ reset })
 </script>

 <style scoped></style>