p-pc-ui 1.2.2 → 1.2.3

package/dist/components/p-form/p-form.vue

@@ -277,16 +277,13 @@ const getFormData = async (options: { no_check?: Boolean } = {}) => {
     // 上传到oss
     else if (renderItem.type == "uploadOss") {
       const fileData = toRaw(formData[key]);
-      console.log("asdasdasd", fileData);
       const keys = fileData.map((val)=>{return val?.response?.key ||  val.key});
       returnFormData[key] = renderItem?.fieldType == "string" ? keys[0] : keys;
     } 
     // 获取file对象
     else if (renderItem.type == "upload") {
-      console.log("上传数据", formState[key]);
       const formatData = formState[key].map((val) => ({ base64: val.thumbUrl, file: val.originFileObj }));
       returnFormData[key] = formatData;
-      console.log(formatData);
     }
 
     // 处理富文本字段
@@ -341,8 +338,6 @@ const uploadChange = (e, renderItem) => {
   //   }
   // }
 
-  console.log(fileList);
-
   formState[renderItem.key] = fileList;
 };
 
@@ -375,7 +370,6 @@ const uploadRequest = async (options, renderItem: FormDataItem) => {
     const config: any = await renderItem.getOssToken({ file_name: file.name });
 
     const key = await uploadOss(file, config);
-    console.log("上传结果",key)
 
     options.onSuccess({ key }, file);
   } else {
@@ -383,7 +377,6 @@ const uploadRequest = async (options, renderItem: FormDataItem) => {
       options.onProgress({ percent: 100 });
       // 成功回调，必须包含 URL 或其他必要字段
       const fakeUrl = URL.createObjectURL(options.file);
-      console.log(fakeUrl);
       options.onSuccess({}, "阿斯加德卡拉胶漏打卡");
     }, 100);
   }
@@ -395,10 +388,13 @@ const uploadRequest = async (options, renderItem: FormDataItem) => {
 const editorUpload = async (renderItem, file, insertFn) => {
   const config: any = await renderItem.getOssToken({ type: renderItem.ossKey, file_name: file.name });
   const key = await uploadOss(file, config);
-  console.log(insertFn, key);
   insertFn(renderItem.baseOssUrl + key);
 };
 
+
+/**
+ * 发送验证码
+ */
 const sendNoticeClick = async (renderItem) => {
   if (renderItem.sendStatus == "sending") return;
   const res = await renderItem.sendNoticeFunc();

package/dist/components/p-modal-form/p-form-modal.ts

@@ -0,0 +1,54 @@
+import { createApp, h, ref } from "vue";
+import PModalForm from './p-form-modal.vue'
+import type { FormDataItem } from "../p-form/index.d";
+
+interface Options {
+    title: string;
+    renderFormData: FormDataItem[];
+    renderKeys?: string[];
+    width?: number;
+    initFormData?: { [key: string]: any };
+}
+
+
+export const PFormModal = (options: Options) => {
+    return new Promise((resolve, reject) => {
+        const container = document.createElement('div')
+        document.body.append(container)
+        const visible = ref(true)
+
+        const app = createApp({
+            render() {
+                return h(PModalForm, {
+                    visible: visible.value,
+                    ...options,
+                    onConfirm: (formData) => {
+                        resolve(formData)
+                        visible.value = false
+                        cleanup()
+                    },
+                    "onUpdate:visible": () => {
+                        resolve(null)
+                        visible.value = false
+                        cleanup()
+                    }
+                })
+            }
+        })
+
+
+
+        const cleanup = () => {
+            setTimeout(() => {
+                app.unmount()
+                if (container.parentNode) {
+                    container.parentNode.removeChild(container)
+                }
+            }, 1000)
+        }
+
+
+        app.mount(container)
+
+    })
+}

package/dist/components/p-modal-form/p-form-modal.vue

@@ -0,0 +1,79 @@
+<template>
+    <Modal v-model:visible="visible" :title="title" :width="modalWidth" okText="确定" cancel-text="取消" @ok="ok"
+        @cancel="cancel">
+        <div style="max-height: 600px; overflow-y: auto; padding-right: 80px">
+            <p-form v-if="formRenderData.length > 0" ref="PFormRef" :render-data="formRenderData"
+                :init-form="initFormValue"></p-form>
+        </div>
+    </Modal>
+</template>
+
+<script lang="ts" setup>
+import { ref, reactive, onMounted } from "vue";
+import { message, Modal } from "ant-design-vue";
+import * as _ from "../../utils/dataUtils";
+import PForm from "../p-form/p-form.vue";
+import type { FormDataItem } from "../p-form/index.d";
+
+interface Props {
+    title: string;
+    renderFormData: FormDataItem[];
+    renderKeys?: string[];
+    width?: number;
+    initFormData?: { [key: string]: any };
+}
+
+const props = defineProps<Props>();
+
+const visible = defineModel<boolean>('visible', { required: true })
+
+
+const emits = defineEmits(['confirm'])
+
+const modalWidth = ref(600);
+
+const PFormRef = ref();
+
+
+let formRenderData = ref([]);
+let initFormValue: any = reactive({});
+
+
+onMounted(() => {
+    const { initFormData, renderFormData, renderKeys, width } = props;
+    // 设置modal的宽度
+    modalWidth.value = width || 600;
+
+    if (!_.isEmpty(initFormData)) {
+        initFormValue = initFormData;
+    } else {
+        initFormValue = {};
+    }
+
+    const filterRenderData: any = [];
+    for (const renderKey of renderKeys || renderFormData.map((val) => val.key)) {
+        const renderItem = _.cloneDeep(renderFormData).find((val) => val.key == renderKey);
+        if (!_.isEmpty(renderItem)) {
+            filterRenderData.push(renderItem);
+        }
+    }
+
+    formRenderData.value = filterRenderData;
+    console.log(formRenderData)
+})
+
+
+const ok = async () => {
+    let formData = await PFormRef.value.getFormData();
+    emits('confirm', formData)
+}
+
+
+const cancel = () => {
+    visible.value = false;
+};
+
+
+</script>
+
+<style scoped></style>

package/dist/components/p-table/index.d.ts

@@ -24,7 +24,7 @@ interface TableLink extends TableBase {
 
 interface TableCommon extends TableBase {
     key: string;
-    type: 'common';
+    type?: 'common'
 }
 
 interface TableDate extends TableBase {
@@ -34,6 +34,7 @@ interface TableDate extends TableBase {
 }
 
 interface TableOperate extends TableBase {
+    key?: 'operate',
     type: 'operate',
     operateButtons: { label: string; click: Function; visibleFunc?: Function }[];
 

package/dist/components/p-table/p-table.vue

@@ -2,27 +2,33 @@
 // import "viewerjs/dist/viewer.css";
 import { api as viewerApi } from "v-viewer";
 import PForm from "../p-form/p-form.vue";
-import { h, ref, reactive, onMounted, toRaw } from "vue";
+import { h, ref, reactive, onMounted, toRaw,defineExpose } from "vue";
 import * as _ from "../../utils/dataUtils";
 import dayjs from "dayjs";
-import { Table as ATable, Button as AButton } from "ant-design-vue";
+import { Table as ATable, Button as AButton,Textarea as ATextarea  } from "ant-design-vue";
 import type { FormDataItem } from "../p-form/index.d";
 import type { TableColumn } from "./index.d";
+import { useSlots } from "vue";
 const SearchFormRef = ref();
 
-interface Props {
+const uSlots  = useSlots()
+
+
+interface Props{
   tableColumns: TableColumn[];
-  getData: null | ((query: object) => Promise<{ data: any[]; count: number; pages: { total: number; now: number } }>);
+  height?: number;
+  editColumns?:string[]
+  getData?: ((query: object) => Promise<{ data: any[]; count: number; pages: { total: number; now: number } }>);
   searchRenderData?: FormDataItem[];
   initSearchFormData?: any;
-  height?: number;
+  data?:any[]
 }
 
-const props = withDefaults(defineProps<Props>(), {
-  getData: null,
-  height: 1000,
-  searchRenderData: [] as any,
-});
+
+
+const  {getData =null,data= [],height=1000,searchRenderData = [],editColumns = [],tableColumns = [],initSearchFormData =[]} = defineProps<Props>()
+
+
 
 const pageQuery = reactive({
   p: 1,
@@ -47,35 +53,44 @@ const rowSelection = {
   },
 };
 
+const editableData = reactive({});
+
+
 const loading = ref(false);
 
 let searchQuery = {};
 
 const renderTableColumns = (tableColumns: TableColumn[]) => {
   const returnColumns: any = [];
-  for (const renderItem of tableColumns) {
+  for (const [index,renderItem] of tableColumns.entries()) {
     if (renderItem.type == "operate") {
-      renderItem.customRender = ({ text, record }) => {
-        const buttons: any = [];
-        for (const buttonItem of renderItem.operateButtons) {
-          if (buttonItem.visibleFunc && !buttonItem.visibleFunc(record)) continue;
-          buttons.push(
-            h(
-              "a",
-              {
-                onClick: () => {
-                  buttonItem.click(record);
-                },
-              },
-              buttonItem.label
-            )
-          );
-        }
-        return h("div", { style: { display: "flex", justifyContent: "space-around" } }, buttons);
-      };
-
-      renderItem.width = renderItem.operateButtons.length * 65;
+      // renderItem.customRender = ({ text, record }) => {
+      //   const buttons: any = [];
+      //   for (const buttonItem of renderItem.operateButtons) {
+      //     if (buttonItem.visibleFunc && !buttonItem.visibleFunc(record)) continue;
+      //     buttons.push(
+      //       h(
+      //         "a",
+      //         {
+      //           onClick: () => {
+      //             buttonItem.click(record);
+      //           },
+      //         },
+      //         buttonItem.label
+      //       )
+      //     );
+      //   }
+      //   return h("div", { style: { display: "flex", justifyContent: "space-around" } }, buttons);
+      // };
+
+
+      renderItem.width = renderItem.operateButtons.length * 55;
+
+      if(editColumns.length > 0){
+        renderItem.width +=110
+      }
       renderItem.align = "center";
+
     }
 
     // 处理默认字段
@@ -144,22 +159,37 @@ const renderTableColumns = (tableColumns: TableColumn[]) => {
 
     renderItem["dataIndex"] = renderItem["key"];
     returnColumns.push(renderItem);
+    
   }
 
+
+
+
   return returnColumns;
 };
 
-const columns = renderTableColumns(props.tableColumns);
+const columns = renderTableColumns(tableColumns);
 
 const renderTableData = async () => {
   loading.value = true;
-  const _searchInitFormData = props.initSearchFormData ? JSON.parse(JSON.stringify(props.initSearchFormData)) : {};
-  const _pageQuery = JSON.parse(JSON.stringify(pageQuery));
-  if (!props.getData) return;
-  const _tableData = await props.getData({ ..._searchInitFormData, ..._pageQuery, ..._.cloneDeep(searchQuery) });
-  tableData.data = _tableData.data;
-  tableData.count = _tableData.count;
-  tableData.pages = _tableData.pages;
+  if(getData){
+    const _searchInitFormData = initSearchFormData ? JSON.parse(JSON.stringify(initSearchFormData)) : {};
+    const _pageQuery = JSON.parse(JSON.stringify(pageQuery));
+    const _tableData = await getData({ ..._searchInitFormData, ..._pageQuery, ..._.cloneDeep(searchQuery) });
+    tableData.data = _tableData.data;
+    tableData.count = _tableData.count;
+    tableData.pages = _tableData.pages;
+  }
+
+  else if(data){
+    tableData.data = data
+  }
+
+
+  tableData.data.forEach((item,index)=>{
+      item["index"] = index
+  })
+  
   loading.value = false;
 };
 
@@ -218,6 +248,22 @@ const getTableData = () => {
   return toRaw(tableData)["data"];
 };
 
+
+
+const edit = (index: string) => {
+  editableData[index] = _.cloneDeep(tableData.data[index]);
+
+
+};
+const save = (key: string) => {
+  Object.assign(tableData.data.filter(item => key === item.key)[0], editableData[key]);
+  delete editableData[key];
+};
+
+const cancel = (key: string) => {
+  delete editableData[key];
+};
+
 onMounted(() => {
   renderTableData();
 });
@@ -245,7 +291,7 @@ defineExpose({
     </PForm>
   </div>
 
-  <div style="display: flex; justify-content: flex-end; margin-bottom: 10px; margin-top: 10px; padding: 20px">
+  <div v-if="uSlots.button"  style="display: flex; justify-content: flex-end; margin-bottom: 10px; margin-top: 10px; padding: 20px">
     <slot name="button"></slot>
   </div>
 
@@ -258,7 +304,7 @@ defineExpose({
     :scroll="{
       y: height,
     }"
-    :pagination="{
+    :pagination="data.length >0?  false :{
       current: pageQuery.p,
       defaultPageSize: pageQuery.pc,
       showSizeChanger: true,
@@ -270,8 +316,32 @@ defineExpose({
     bordered
     @change="onchange"
   >
-    <template #bodyCell="slotProps">
-      <slot name="bodyCell" v-bind="slotProps" />
+    <template #bodyCell="{ column, text, record,index }">
+      <template v-if="editColumns.includes(column.key as string)">
+        <div>
+          <a-textarea
+            v-if="editableData[record.index]"
+            v-model:value="editableData[record.index][column.key]"
+            style="margin: -5px 0"
+            :auto-size="true"
+          />
+          <template v-else>
+           {{text}}
+          </template>
+        </div>
+      </template>
+
+      <template v-else-if="column['type'] === 'operate'">
+
+        <div style="display:flex;gap:10px;justify-content: center;">
+          <a class="operate-a" v-for="item in column['operateButtons']" @click="item.click(record)"> {{ item.label}}</a>
+          <a class="operate-a" v-if="editableData[record.index]" @click="save(record.index)">保存</a>
+              <a class="operate-a" v-if="editableData[record.index]" @click="cancel(record.index)">退出</a>
+            <a class="operate-a" @click="edit(record.index)">编辑</a>
+        </div>
+      </template>
+
+      <slot name="bodyCell" v-bind="{column, text, record,index}" />
     </template>
   </a-table>
 </template>
@@ -296,4 +366,9 @@ defineExpose({
   padding-top: 25px;
   border-bottom: 10px solid #f5f5f5;
 }
+
+
+.operate-a{
+  color: #126cff;
+}
 </style>

package/dist/index.ts

@@ -1,8 +1,7 @@
 import PTable from './components/p-table/p-table.vue'
 import PForm from './components/p-form/p-form.vue'
-import PModalForm from './components/p-modal-form/p-modal-form.vue'
-
-export { PTable, PModalForm, PForm }
+import { PFormModal } from './components/p-modal-form/p-form-modal'
+export { PTable, PFormModal, PForm }
 export type { FormDataItem } from './components/p-form/index.d'
 export type { TableColumn } from './components/p-table/index.d'
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "p-pc-ui",
-  "version": "1.2.2",
+  "version": "1.2.3",
   "type": "module",
   "module": "dist/index.ts",
   "main": "dist/index.ts",

package/dist/components/p-modal-form/p-modal-form.vue

@@ -1,113 +0,0 @@
-<template>
-  <Modal
-    v-model:open="visible"
-    :title="titleText"
-    :width="modalWidth"
-    okText="确定"
-    cancel-text="取消"
-    @ok="ok"
-    @cancel="cancel"
-  >
-    <div style="max-height: 600px; overflow-y: auto; padding-right: 80px">
-      <p-form v-if="visible" ref="PFormRef" :render-data="formRenderData" :init-form="initFormValue"></p-form>
-    </div>
-  </Modal>
-</template>
-
-<script lang="ts" setup>
-import PForm from "../p-form/p-form.vue";
-import { ref, reactive } from "vue";
-import { message, Modal } from "ant-design-vue";
-import * as _ from "../../utils/dataUtils";
-import type { FormDataItem } from "../p-form/index.d";
-
-interface Props {}
-const props = defineProps<Props>();
-
-const modalWidth = ref(600);
-
-const visible = ref(false);
-const titleText = ref("");
-const PFormRef = ref();
-
-let formRenderData = reactive([]);
-let initFormValue: any = reactive({});
-
-interface ModalFormConfig {
-  operateType: "add" | "detail" | "edit";
-  renderFormData: FormDataItem[];
-  onOk: Function;
-  title?: string;
-  renderKeys?: string[];
-  width?: number;
-  rowId?: string;
-  extraFormData?: { [key: string]: any };
-  initFormData?: { [key: string]: any };
-}
-
-let modalConfig: ModalFormConfig;
-
-const open = async (config: ModalFormConfig) => {
-  const { operateType, rowId, initFormData, onOk, renderFormData, renderKeys, extraFormData, title, width } = config;
-  if (!["add", "edit", "detail"].includes(operateType)) return message.error("操作类型错误");
-  if (["edit", "detail"].includes(operateType) && _.isEmpty(rowId)) return message.error("请传入主键ID");
-
-  // 设置modal的宽度
-  modalWidth.value = width || 600;
-
-  if (!_.isEmpty(initFormData)) {
-    initFormValue = initFormData;
-  } else {
-    initFormValue = {};
-  }
-
-  if (title) {
-    titleText.value = title;
-  } else {
-    const typeMap = {
-      add: "新增",
-      edit: "编辑",
-      detail: "查看",
-    };
-    titleText.value = typeMap[operateType];
-  }
-
-  const filterRenderData: any = [];
-  for (const renderKey of renderKeys || renderFormData.map((val) => val.key)) {
-    const renderItem = _.cloneDeep(renderFormData).find((val) => val.key == renderKey);
-    if (!_.isEmpty(renderItem)) {
-      filterRenderData.push(renderItem);
-    }
-  }
-
-  modalConfig = config;
-  formRenderData = filterRenderData;
-  visible.value = true;
-};
-
-const ok = async () => {
-  let formData = await PFormRef.value.getFormData();
-  if (_.isEmpty(formData)) return;
-  if (!_.isEmpty(modalConfig.extraFormData)) {
-    formData = { ...formData, ...modalConfig.extraFormData };
-  }
-  let callbackRes = null;
-  if (modalConfig.operateType == "edit") {
-    callbackRes = await modalConfig.onOk(modalConfig.rowId, formData);
-  } else {
-    callbackRes = await modalConfig.onOk(formData);
-  }
-  if (callbackRes === false) return;
-  visible.value = false;
-};
-
-const cancel = () => {
-  visible.value = false;
-};
-
-defineExpose({
-  open,
-});
-</script>
-
-<style scoped></style>