使用tanstack/vue-query

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

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>

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>

cdTMP/src/main.ts

@@ -5,7 +5,6 @@ import globalComponents from "@/components"
 import App from "./App.vue"
 import router from "./router"
 import pinia from "@/store"
-// import directive from './directive'
 // arcodesign的样式全局引入
 import "@arco-design/web-vue/dist/arco.css"
 
@@ -24,15 +23,18 @@ app.use(ArcoVueIcon)
 app.use(router)
 app.use(pinia)
 app.use(globalComponents)
+// 使用服务端请求数据管理库
+import { VueQueryPlugin } from "@tanstack/vue-query"
+app.use(VueQueryPlugin)
 import directives from "@/directives"
 app.use(directives)
 
 // 注册ma-icon图标
 const modules = import.meta.glob("./assets/ma-icons/*.vue", { eager: true })
 for (const path in modules) {
-    const name = path.match(/([A-Za-z0-9_-]+)/g)[2]
+    const name = path.match(/([A-Za-z0-9_-]+)/g)![2]
     const componentName = `MaIcon${name}`
-    app.component(componentName, modules[path].default)
+    app.component(componentName, (modules[path] as any).default)
 }
 
 // 全局注册变量和工具

cdTMP/src/views/datamanage/dictmanage/DataList/useCrudRef.ts

@@ -17,11 +17,12 @@ export default function useCrudRef(currentRow: Ref<{ id: number | string; name:
         showTools: false,
         beforeAdd: (form: any) => {
             form.id = currentRow.value?.id
+            return true
         },
         add: { show: true, api: dictApi.saveDictItem },
         edit: { show: true, api: dictApi.updateDictItemData },
         delete: { show: true, api: dictApi.realDeleteItem },
-        afterDelete(response) {
+        afterDelete() {
             crudRef.value.tableRef.selectAll(false)
         }
     })

cdTMP/src/views/project/case/index.vue

@@ -289,7 +289,7 @@ const crudColumns = ref([
     {
         title: "闭环方式",
         align: "center",
-        width: 160,
+        width: 200,
         dataIndex: "closeMethod",
         addDefaultValue: [],
         search: true,

cdTMP/src/views/testmanage/projmanage/cpns/preview.vue

@@ -6,14 +6,14 @@
             class="my-custom-class"
             :columns="props.columns"
             :data="previewRecord"
-            :column="1"
+            :column="3"
             size="mini"
         ></ma-info>
     </a-modal>
 </template>
 
 <script setup>
-import { ref, reactive } from "vue"
+import { ref } from "vue"
 import MaInfo from "@/components/ma-info/index.vue"
 // 提供open方法给外界，并获取整行数据
 const visible = ref(false)

cdTMP/src/views/testmanage/projmanage/hooks/useCrudInit.ts

@@ -199,7 +199,6 @@ const useCrudInit = function () {
                 }
             ]
         },
-        // 这是只为了搜索的字段
         {
             title: "时间范围",
             hide: true,
@@ -261,6 +260,7 @@ const useCrudInit = function () {
             hide: true,
             search: false,
             formType: "select",
+            allowCreate: true,
             dict: { name: "devplant", props: { label: "title", value: "key" } }
         },
         {