p-pc-ui 1.2.0 → 1.2.2

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

@@ -10,7 +10,10 @@ interface Base {
     visibleHook?: Function,
     tooltip?: string,
     hideLabel?: boolean
-    colon?: boolean
+    colon?: boolean,
+    labelSpan?: number,
+    valueSpan?: number,
+    labelAlign?: 'left' | 'right'
 }
 
 
@@ -21,7 +24,7 @@ export interface Input extends Base {
 }
 
 export interface InputNumber extends Base {
-    type: 'numberInput',
+    type: 'number',
     prefix?: any,
     suffix?: any
 }
@@ -71,9 +74,8 @@ interface UploadBase extends Base {
 
 export interface UploadOss extends UploadBase {
     type: 'uploadOss',
-    ossKey: string,
-    getOssToken: Function,
-    baseOssUrl?: string,
+    getOssToken: ({file_name}) => Promise<any>,
+    baseOssUrl: string,
 }
 
 
@@ -97,8 +99,8 @@ export interface Component extends Base {
 
 export interface Editor extends Base {
     type: 'editor',
-    showOssUrl,
-    uploadFunc: (file) => Promise<string>,
+    getOssToken: ({ file_name: string }) => Promise<any>,
+    baseOssUrl?: string,
 }
 
 

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

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ref, reactive, onMounted, render, onBeforeMount, useSlots, toRaw, shallowRef } from "vue";
-import type { FormDataItem } from "./index.d";
+import type { FormDataItem } from "./index";
 import {
   Button as AButton,
   message,
@@ -32,7 +32,7 @@ interface Props {
   renderData: FormDataItem[];
   labelSpan?: number;
   valueSpan?: number;
-  layout?: "row" | "col";
+  layout?: "horizontal" | "vertical" | "inline";
   initForm?: { [key: string]: any };
   requiredMark?: boolean;
   isSearchForm?: boolean;
@@ -45,7 +45,7 @@ interface Props {
 const props = withDefaults(defineProps<Props>(), {
   labelSpan: 8,
   valueSpan: 16,
-  layout: "col",
+  layout: "horizontal",
   isSearchForm: false,
   requiredMark: true,
 });
@@ -80,15 +80,21 @@ const disposeRenderData = (renderData: FormDataItem[]) => {
   const _renderData = _.cloneDeep(renderData).map((val) => ({
     ...val,
     rules: [] as any,
-  }));
+  })) as (FormDataItem & {rules:[]})[];
 
   for (const renderItem of _renderData) {
-    const { fieldType, fieldRules, label } = renderItem;
+    let { fieldType, fieldRules, label } = renderItem;
     // 处理校验规则
     const rules: any = [];
     const operateType = ["select", "treeSeect", "date", "datePicker"].includes(renderItem.type) ? "选择" : "输入";
     for (const fieldRule of fieldRules || []) {
       const { msg, required, min, max } = fieldRule;
+      
+      // 图片需要额外处理
+
+      if((renderItem.type == 'uploadOss' || renderItem.type== 'upload') && renderItem.fieldType == 'string'){
+          fieldType ='array'
+      }
 
       if (required) {
         rules.push({
@@ -155,6 +161,7 @@ const disposeRenderData = (renderData: FormDataItem[]) => {
       }
     }
   }
+
   return _renderData;
 };
 
@@ -183,7 +190,7 @@ const initFormState = (renderData: FormDataItem[], initFromData = {}) => {
           break;
         case "string":
           // 如果是图片类型, 并且是string类型,代表用户只需要1张图片,并且已文本的形式存放
-          if (renderItem.type == "uploadOss") {
+          if (renderItem.type == "uploadOss" || renderItem.type == 'upload') {
             initValue = [];
           } else {
             initValue = "";
@@ -224,7 +231,7 @@ const initFormState = (renderData: FormDataItem[], initFromData = {}) => {
         };
       });
     } else if (renderItem.type == "editor") {
-      initValue = initValue.replace(/\<\<图片替换地址\>\>/g, renderItem.showOssUrl);
+      initValue = initValue.replace(/\<\<图片替换地址\>\>/g, renderItem.baseOssUrl);
     }
 
     _formState[renderItem["key"]] = initValue;
@@ -271,9 +278,9 @@ const getFormData = async (options: { no_check?: Boolean } = {}) => {
     else if (renderItem.type == "uploadOss") {
       const fileData = toRaw(formData[key]);
       console.log("asdasdasd", fileData);
-      const keys = fileData.map((val) => val.response.key);
+      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]);
@@ -284,7 +291,16 @@ const getFormData = async (options: { no_check?: Boolean } = {}) => {
 
     // 处理富文本字段
     else if (renderItem.type == "editor") {
-      returnFormData[key] = replaceUrl(returnFormData[key], renderItem.showOssUrl, "<<图片替换地址>>");
+      const richText = formData[key];
+      const dom = new DOMParser().parseFromString(richText, "text/html");
+      // 将视频居中展示
+      const videos = dom.querySelectorAll('[data-w-e-type="video"]') || [];
+      //@ts-ignore
+      for (const video of videos) {
+        //@ts-ignore
+        video.style.textAlign = "center";
+      }
+      returnFormData[key] = replaceUrl(dom.body.innerHTML, renderItem.baseOssUrl, "<<图片替换地址>>");
     }
 
     // 转换成上传对象
@@ -330,27 +346,38 @@ const uploadChange = (e, renderItem) => {
   formState[renderItem.key] = fileList;
 };
 
+/**
+ * 上传到阿里云oss
+ */
+const uploadOss = async (file, config) => {
+  const formData = new FormData();
+  formData.append("key", config.key); // oss 文件路径
+  formData.append("policy", config.policy);
+  formData.append("OSSAccessKeyId", config.OSSAccessKeyId);
+  formData.append("success_action_status", "200");
+  formData.append("signature", config.signature);
+  formData.append("file", file);
+  await fetch(config.host, {
+    method: "POST",
+    body: formData,
+  });
+  message.success("上传成功");
+
+  return config.key;
+};
+
 /**
  * 自定义上传事件
  */
 const uploadRequest = async (options, renderItem: FormDataItem) => {
   const file = options.file;
   if (renderItem.type == "uploadOss") {
-    const config: any = await renderItem.getOssToken({ type: renderItem.ossKey, file_name: file.name });
-
-    const formData = new FormData();
-    formData.append("key", config.key); // oss 文件路径
-    formData.append("policy", config.policy);
-    formData.append("OSSAccessKeyId", config.OSSAccessKeyId);
-    formData.append("success_action_status", "200");
-    formData.append("signature", config.signature);
-    formData.append("file", file);
-    await fetch(config.host, {
-      method: "POST",
-      body: formData,
-    });
-    message.success("上传成功");
-    options.onSuccess({ key: config.key }, file);
+    const config: any = await renderItem.getOssToken({ file_name: file.name });
+
+    const key = await uploadOss(file, config);
+    console.log("上传结果",key)
+
+    options.onSuccess({ key }, file);
   } else {
     setTimeout(() => {
       options.onProgress({ percent: 100 });
@@ -362,6 +389,16 @@ 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();
@@ -400,13 +437,13 @@ defineExpose({
     :model="formState"
     name="basic"
     autocomplete="off"
-    :layout="layout == 'row' ? 'inline' : 'vertical'"
+    :layout="layout"
     :required-mark="requiredMark"
   >
     <div v-for="(renderItem, index) in renderData">
       <a-form-item
-        :label-col="{ span: renderItem.hideLabel ? 0 : labelSpan }"
-        :wrapper-col="{ span: renderItem.hideLabel ? undefined : valueSpan }"
+        :label-col="{ span: renderItem.hideLabel ? 0 : renderItem.labelSpan || labelSpan }"
+        :wrapper-col="{ span: renderItem.hideLabel ? undefined : renderItem.valueSpan || valueSpan }"
         v-show="!renderItem.visibleHook || (renderItem.visibleHook && renderItem.visibleHook(formState))"
         :label="renderItem.label && !renderItem.hideLabel ? renderItem.label : ''"
         :name="renderItem.key"
@@ -421,6 +458,7 @@ defineExpose({
           marginBottom: isSearchForm ? '20px' : '0px',
         }"
         :tooltip="renderItem.tooltip"
+        :label-align="renderItem.labelAlign || 'right'"
       >
         <a-input
           v-model:value="formState[renderItem.key]"
@@ -494,13 +532,6 @@ defineExpose({
           :auto-size="{ minRows: 2, maxRows: 10 }"
         />
 
-        <a-input-number
-          style="width: 100%"
-          v-model:value="formState[renderItem.key]"
-          v-if="renderItem.type == 'numberInput'"
-          :placeholder="`请输入${renderItem.label}`"
-        />
-
         <a-select
           style="min-width: 170px; margin-right: 15px"
           v-model:value="formState[renderItem.key]"
@@ -575,7 +606,7 @@ defineExpose({
             style="border-bottom: 1px solid #ccc"
             :editor="editorRef"
             :defaultConfig="{
-              excludeKeys: ['group-video', 'insertImage', 'codeBlock'],
+              excludeKeys: ['insertVideo', 'insertImage', 'codeBlock'],
             }"
             mode="default"
           />
@@ -586,9 +617,13 @@ defineExpose({
               placeholder: '请输入内容...',
               MENU_CONF: {
                 uploadImage: {
-                  customUpload: async (file, insertImgFn) => {
-                    const url = await renderItem.uploadFunc(file);
-                    insertImgFn(url);
+                  customUpload: async (file, insertFn) => {
+                    await editorUpload(renderItem, file, insertFn);
+                  },
+                },
+                uploadVideo: {
+                  customUpload: async (file, insertFn) => {
+                    await editorUpload(renderItem, file, insertFn);
                   },
                 },
               },

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

@@ -1,6 +1,5 @@
 
 interface TableBase {
-    key: string;
     title: string;
     width?: number;
     sorter?: boolean;
@@ -11,6 +10,7 @@ interface TableBase {
 }
 
 interface TablePic extends TableBase {
+    key: string;
     type: 'pic';
     showOssUrlFunc?: (ossKey: string) => string;
     picWidth?: number;
@@ -18,21 +18,23 @@ interface TablePic extends TableBase {
 }
 
 interface TableLink extends TableBase {
+    key: string;
     type: 'link';
 }
 
 interface TableCommon extends TableBase {
-    type?: 'common';
+    key: string;
+    type: 'common';
 }
 
 interface TableDate extends TableBase {
+    key: string;
     type: 'date';
     format?: string;
 }
 
 interface TableOperate extends TableBase {
     type: 'operate',
-    key?: string,
     operateButtons: { label: string; click: Function; visibleFunc?: Function }[];
 
 }

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

@@ -1,4 +1,3 @@
-
 <script lang="ts" setup>
 // import "viewerjs/dist/viewer.css";
 import { api as viewerApi } from "v-viewer";
@@ -6,6 +5,7 @@ import PForm from "../p-form/p-form.vue";
 import { h, ref, reactive, onMounted, toRaw } from "vue";
 import * as _ from "../../utils/dataUtils";
 import dayjs from "dayjs";
+import { Table as ATable, Button as AButton } from "ant-design-vue";
 import type { FormDataItem } from "../p-form/index.d";
 import type { TableColumn } from "./index.d";
 const SearchFormRef = ref();
@@ -236,7 +236,7 @@ defineExpose({
       :is-search-form="true"
       :render-data="searchRenderData"
       :init-form="initSearchFormData"
-      layout="row"
+      layout="inline"
     >
       <template v-slot:button>
         <a-button type="primary" @click="searchClick" style="margin-left: 20px"> 搜索 </a-button>
@@ -269,11 +269,13 @@ defineExpose({
     }"
     bordered
     @change="onchange"
-  ></a-table>
+  >
+    <template #bodyCell="slotProps">
+      <slot name="bodyCell" v-bind="slotProps" />
+    </template>
+  </a-table>
 </template>
 
-
-
 <style>
 .ant-table-striped :deep(.table-striped) td {
   background-color: #fafafa;

package/dist/index.ts

@@ -1,4 +1,4 @@
-import PTable from './components/p-table'
+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'
 

package/package.json

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

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

@@ -1,8 +0,0 @@
-
-import type { App } from 'vue'
-import PTable from './p-table.vue'
-PTable.install = (app: App) => {
-    app.component('PTable', PTable)
-}
-
-export default PTable