p-pc-ui 1.3.1 → 1.3.4

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

@@ -14,7 +14,8 @@ interface Base<K extends string = string> {
     colon?: boolean,
     labelSpan?: number,
     valueSpan?: number,
-    labelAlign?: 'left' | 'right'
+    labelAlign?: 'left' | 'right',
+    disabled: ?boolean
 }
 
 
@@ -75,13 +76,13 @@ interface UploadBase<K extends string = string> extends Base<K> {
 
 export interface UploadOss<K extends string = string> extends UploadBase<K> {
     type: 'uploadOss',
-    getOssToken: ({file_name}) => Promise<any>,
+    getOssToken: ({ file_name }) => Promise<any>,
     baseOssUrl: string,
 }
 
 export interface UploadTos<K extends string = string> extends UploadBase<K> {
     type: 'uploadTos',
-    getTosToken: ({file_name}) => Promise<any>,
+    getTosToken: ({ file_name }) => Promise<any>,
     baseTosUrl: string,
 }
 
@@ -105,12 +106,6 @@ export interface Component<K extends string = string> extends Base<K> {
     component: any
 }
 
-export interface Editor<K extends string = string> extends Base<K> {
-    type: 'editor',
-    getOssToken: ({ file_name: string }) => Promise<any>,
-    baseOssUrl?: string,
-}
-
 
 export type FormDataItem<K extends string = string> =
     | Input<K>
@@ -124,4 +119,3 @@ export type FormDataItem<K extends string = string> =
     | Textarea<K>
     | DatePicker<K>
     | Component<K>
-    | Editor<K>

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

@@ -23,8 +23,6 @@ import * as _ from "../../utils/dataUtils";
 import { api as viewerApi } from "v-viewer";
 import dayjs from "dayjs";
 import { UploadOutlined, PlusOutlined } from "@ant-design/icons-vue";
-import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
-import "@wangeditor/editor/dist/css/style.css"; // 引入 css
 
 const uSlots = useSlots();
 
@@ -63,8 +61,6 @@ const emits = defineEmits(["confirm"]);
 /**
  * 富文本相关配置
  */
-const editorRef = shallowRef();
-
 onBeforeMount(async () => {
   renderData.value = await disposeRenderData(props.renderData);
   const _formState = initFormState(renderData.value, props.initForm);
@@ -245,8 +241,6 @@ const initFormState = (renderData: FormDataItem[], initFromData = {}) => {
           url: renderItem.baseTosUrl + val,
         };
       });
-    } else if (renderItem.type == "editor") {
-      initValue = initValue.replace(/\<\<图片替换地址\>\>/g, renderItem.baseOssUrl);
     }
 
     _formState[renderItem["key"]] = initValue;
@@ -257,8 +251,8 @@ const initFormState = (renderData: FormDataItem[], initFromData = {}) => {
 
 const handlePicPreview = (file: any) => {
   const url = URL.createObjectURL(file.originFileObj);
-  
-  viewerApi({ images: [url ||file.url || file.key || file.thumbUrl] });
+
+  viewerApi({ images: [url || file.url || file.key || file.thumbUrl] });
 };
 
 const replaceUrl = (str, urlToReplace, replacement) => {
@@ -304,20 +298,6 @@ const getFormData = async (options: { no_check?: Boolean } = {}) => {
       returnFormData[key] = formatData;
     }
 
-    // 处理富文本字段
-    else if (renderItem.type == "editor") {
-      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, "<<图片替换地址>>");
-    }
-
     // 转换成上传对象
     else if (key.includes("__")) {
       _.set(returnFormData, key.split("__"), formData[key]);
@@ -421,15 +401,6 @@ 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);
-  insertFn(renderItem.baseOssUrl + key);
-};
-
 /**
  * 发送验证码
  */
@@ -455,10 +426,6 @@ const sendNoticeClick = async (renderItem) => {
   renderItem.interval = copyInterval;
 };
 
-const handleRichEditorCreated = (editor) => {
-  editorRef.value = editor;
-};
-
 defineExpose({
   getFormData,
   resetForm,
@@ -494,180 +461,156 @@ defineExpose({
         :tooltip="renderItem.tooltip"
         :label-align="renderItem.labelAlign || 'right'"
       >
-        <a-input
-          v-model:value="formState[renderItem.key]"
-          v-if="renderItem.type == 'input' && [undefined, 'string'].includes(renderItem.fieldType)"
-          type="text"
-          :placeholder="renderItem.placeholder || `请输入${renderItem.label}`"
-        >
-          <template v-if="renderItem.prefix" v-slot:prefix>
-            <component :is="renderItem.prefix" />
-          </template>
-          <template v-if="renderItem.suffix" v-slot:suffix>
-            <component :is="renderItem.suffix" />
-          </template>
-        </a-input>
-
-        <a-input
-          v-model:value.number="formState[renderItem.key]"
-          v-if="renderItem.type == 'input' && renderItem.fieldType == 'number'"
-          type="number"
-          :placeholder="renderItem.placeholder || `请输入${renderItem.label}`"
-        >
-          <template v-if="renderItem.prefix" v-slot:prefix>
-            <component :is="renderItem.prefix" />
-          </template>
-          <template v-if="renderItem.suffix" v-slot:suffix>
-            <component :is="renderItem.suffix" />
-          </template>
-        </a-input>
-
-        <a-input-password
-          v-model:value="formState[renderItem.key]"
-          v-if="renderItem.type == 'password'"
-          type="password"
-          :placeholder="renderItem.placeholder || `请输入${renderItem.label}`"
-        >
-          <template v-if="renderItem.prefix" v-slot:prefix>
-            <component :is="renderItem.prefix" />
-          </template>
-        </a-input-password>
-
-        <a-input
-          v-model:value="formState[renderItem.key]"
-          v-if="renderItem.type == 'code' && [undefined, 'string'].includes(renderItem.fieldType)"
-          type="text"
-          :placeholder="renderItem.placeholder || `请输入${renderItem.label}`"
-        >
-          <template v-if="renderItem.prefix" v-slot:prefix>
-            <component :is="renderItem.prefix" />
-          </template>
-          <template v-slot:suffix>
-            <span
-              v-if="
-                (!renderItem.activityFunc || (renderItem.activityFunc && renderItem.activityFunc(formState))) &&
-                renderItem.sendStatus != 'sending'
-              "
-              class="send-notice send-notice-activity"
-              @click="sendNoticeClick(renderItem)"
-            >
-              {{ renderItem.codeName }}
-            </span>
-            <span v-else class="send-notice">
-              {{ renderItem.codeName }}
-            </span>
-          </template>
-        </a-input>
-
-        <a-textarea
-          v-model:value="formState[renderItem.key]"
-          v-if="renderItem.type == 'textarea'"
-          :placeholder="renderItem.placeholder || `请输入${renderItem.label}`"
-          :auto-size="{ minRows: 2, maxRows: 10 }"
-        />
-
-        <a-select
-          style="min-width: 170px; margin-right: 15px"
-          v-model:value="formState[renderItem.key]"
-          :placeholder="renderItem.placeholder || `请选择`"
-          v-if="renderItem.type == 'select'"
-          :fieldNames="renderItem.fieldNames || { label: 'label', value: 'value' }"
-          :options="renderItem.optionList"
-          :mode="renderItem.isMultiple ? 'multiple' : undefined"
-        ></a-select>
-
-        <a-radio-group v-if="renderItem.type == 'radio'" v-model:value="formState[renderItem.key]">
-          <a-radio v-for="item in renderItem.optionList" :value="item[renderItem.fieldNames?.value || 'value']">
-            {{ item[renderItem.fieldNames?.label || "label"] }}
-          </a-radio>
-        </a-radio-group>
-
-        <a-date-picker
-          v-model:value="formState[renderItem.key]"
-          v-if="renderItem.type === 'datePicker'"
-          show-time
-          :placeholder="`请选择${renderItem.label}`"
-          class="ant-input"
-          format="YYYY-MM-DD HH:mm:ss"
-          value-format="YYYY-MM-DD HH:mm:ss"
-        />
-
-        <a-tree-select
-          style="min-width: 170px; margin-right: 15px"
-          v-model:value="formState[renderItem.key]"
-          :tree-data="renderItem.optionList"
-          v-if="renderItem.type == 'treeSelect'"
-          :fieldNames="renderItem.fieldNames || { children: 'children', label: 'name', value: 'id' }"
-          :placeholder="renderItem.placeholder || `请选择`"
-        ></a-tree-select>
-
-        <a-upload
-          v-if="renderItem.type == 'uploadOss' || renderItem.type == 'uploadTos' || renderItem.type == 'upload'"
-          :file-list="formState[renderItem.key]"
-          :multiple="true"
-          :max-count="renderItem?.maxCount || 1"
-          @preview="handlePicPreview"
-          :customRequest="
-            (e) => {
-              uploadRequest(e, renderItem);
-            }
-          "
-          @change="
-            (e) => {
-              uploadChange(e, renderItem);
-            }
-          "
-          :headers="{
-            'Cache-Control': 'max-age=15552000',
+        <div
+          :style="{
+            pointerEvents: renderItem.disabled ? 'none' : 'auto',
+            opacity: renderItem.disabled ? 0.6 : 1,
+            cursor: renderItem.disabled ? 'not-allowed' : 'auto',
           }"
-          :list-type="renderItem.uploadType == 'pic' ? 'picture-card' : undefined"
         >
-          <div v-if="renderItem.uploadType == 'pic'">
-            <plus-outlined />
-            <div style="margin-top: 8px">{{ renderItem.label }}</div>
-          </div>
-
-          <div v-else>
-            <a-button style="display: flex; align-items: center">
-              <upload-outlined></upload-outlined>
-              上传
-            </a-button>
-          </div>
-        </a-upload>
-
-        <div style="border: 1px solid #ccc" v-if="renderItem.type == 'editor'">
-          <Toolbar
-            style="border-bottom: 1px solid #ccc"
-            :editor="editorRef"
-            :defaultConfig="{
-              excludeKeys: ['insertVideo', 'insertImage', 'codeBlock'],
-            }"
-            mode="default"
+          <a-input
+            v-model:value="formState[renderItem.key]"
+            v-if="renderItem.type == 'input' && [undefined, 'string'].includes(renderItem.fieldType)"
+            type="text"
+            :placeholder="renderItem.placeholder || `请输入${renderItem.label}`"
+          >
+            <template v-if="renderItem.prefix" v-slot:prefix>
+              <component :is="renderItem.prefix" />
+            </template>
+            <template v-if="renderItem.suffix" v-slot:suffix>
+              <component :is="renderItem.suffix" />
+            </template>
+          </a-input>
+
+          <a-input
+            v-model:value.number="formState[renderItem.key]"
+            v-if="renderItem.type == 'input' && renderItem.fieldType == 'number'"
+            type="number"
+            :placeholder="renderItem.placeholder || `请输入${renderItem.label}`"
+          >
+            <template v-if="renderItem.prefix" v-slot:prefix>
+              <component :is="renderItem.prefix" />
+            </template>
+            <template v-if="renderItem.suffix" v-slot:suffix>
+              <component :is="renderItem.suffix" />
+            </template>
+          </a-input>
+
+          <a-input-password
+            v-model:value="formState[renderItem.key]"
+            v-if="renderItem.type == 'password'"
+            type="password"
+            :placeholder="renderItem.placeholder || `请输入${renderItem.label}`"
+          >
+            <template v-if="renderItem.prefix" v-slot:prefix>
+              <component :is="renderItem.prefix" />
+            </template>
+          </a-input-password>
+
+          <a-input
+            v-model:value="formState[renderItem.key]"
+            v-if="renderItem.type == 'code' && [undefined, 'string'].includes(renderItem.fieldType)"
+            type="text"
+            :placeholder="renderItem.placeholder || `请输入${renderItem.label}`"
+          >
+            <template v-if="renderItem.prefix" v-slot:prefix>
+              <component :is="renderItem.prefix" />
+            </template>
+            <template v-slot:suffix>
+              <span
+                v-if="
+                  (!renderItem.activityFunc || (renderItem.activityFunc && renderItem.activityFunc(formState))) &&
+                  renderItem.sendStatus != 'sending'
+                "
+                class="send-notice send-notice-activity"
+                @click="sendNoticeClick(renderItem)"
+              >
+                {{ renderItem.codeName }}
+              </span>
+              <span v-else class="send-notice">
+                {{ renderItem.codeName }}
+              </span>
+            </template>
+          </a-input>
+
+          <a-textarea
+            v-model:value="formState[renderItem.key]"
+            v-if="renderItem.type == 'textarea'"
+            :placeholder="renderItem.placeholder || `请输入${renderItem.label}`"
+            :auto-size="{ minRows: 2, maxRows: 10 }"
           />
-          <Editor
-            style="height: 500px; overflow-y: hidden"
-            v-model="formState[renderItem.key]"
-            :defaultConfig="{
-              placeholder: '请输入内容...',
-              MENU_CONF: {
-                uploadImage: {
-                  customUpload: async (file, insertFn) => {
-                    await editorUpload(renderItem, file, insertFn);
-                  },
-                },
-                uploadVideo: {
-                  customUpload: async (file, insertFn) => {
-                    await editorUpload(renderItem, file, insertFn);
-                  },
-                },
-              },
-            }"
-            mode="default"
-            @onCreated="handleRichEditorCreated"
+
+          <a-select
+            style="min-width: 170px; margin-right: 15px"
+            v-model:value="formState[renderItem.key]"
+            :placeholder="renderItem.placeholder || `请选择`"
+            v-if="renderItem.type == 'select'"
+            :fieldNames="renderItem.fieldNames || { label: 'label', value: 'value' }"
+            :options="renderItem.optionList"
+            :mode="renderItem.isMultiple ? 'multiple' : undefined"
+          ></a-select>
+
+          <a-radio-group v-if="renderItem.type == 'radio'" v-model:value="formState[renderItem.key]">
+            <a-radio v-for="item in renderItem.optionList" :value="item[renderItem.fieldNames?.value || 'value']">
+              {{ item[renderItem.fieldNames?.label || "label"] }}
+            </a-radio>
+          </a-radio-group>
+
+          <a-date-picker
+            v-model:value="formState[renderItem.key]"
+            v-if="renderItem.type === 'datePicker'"
+            show-time
+            :placeholder="`请选择${renderItem.label}`"
+            class="ant-input"
+            format="YYYY-MM-DD HH:mm:ss"
+            value-format="YYYY-MM-DD HH:mm:ss"
           />
-        </div>
 
-        <component v-if="renderItem.type == 'component'" :is="renderItem.component"></component>
+          <a-tree-select
+            style="min-width: 170px; margin-right: 15px"
+            v-model:value="formState[renderItem.key]"
+            :tree-data="renderItem.optionList"
+            v-if="renderItem.type == 'treeSelect'"
+            :fieldNames="renderItem.fieldNames || { children: 'children', label: 'name', value: 'id' }"
+            :placeholder="renderItem.placeholder || `请选择`"
+          ></a-tree-select>
+
+          <a-upload
+            v-if="renderItem.type == 'uploadOss' || renderItem.type == 'uploadTos' || renderItem.type == 'upload'"
+            :file-list="formState[renderItem.key]"
+            :multiple="true"
+            :max-count="renderItem?.maxCount || 1"
+            @preview="handlePicPreview"
+            :customRequest="
+              (e) => {
+                uploadRequest(e, renderItem);
+              }
+            "
+            @change="
+              (e) => {
+                uploadChange(e, renderItem);
+              }
+            "
+            :headers="{
+              'Cache-Control': 'max-age=15552000',
+            }"
+            :list-type="renderItem.uploadType == 'pic' ? 'picture-card' : undefined"
+          >
+            <div v-if="renderItem.uploadType == 'pic'">
+              <plus-outlined />
+              <div style="margin-top: 8px">{{ renderItem.label }}</div>
+            </div>
+
+            <div v-else>
+              <a-button style="display: flex; align-items: center">
+                <upload-outlined></upload-outlined>
+                上传
+              </a-button>
+            </div>
+          </a-upload>
+
+          <component v-if="renderItem.type == 'component'" :is="renderItem.component"></component>
+        </div>
       </a-form-item>
     </div>
 

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, reactive, onMounted, computed, withDefaults, useSlots } from 'vue'
+import { ref, reactive, onMounted, computed, useSlots } from 'vue'
 import PButtonRounded from '../p-button-rounded/p-button-rounded.vue'
 import { Modal as AModal } from 'ant-design-vue'
 const {
@@ -69,7 +69,7 @@ const confirmClick = async () => {
     :closable="closable"
   >
     <template #title v-if="title">
-      <div class="p-[20px] text-[18px] font-bold leading-[27px] text-[#272727]">
+      <div style="padding: 20px; font-size: 18px; font-weight: bold; line-height: 27px; color: #272727;">
         {{ title }}
       </div>
     </template>
@@ -81,8 +81,8 @@ const confirmClick = async () => {
         <slot name="footer"></slot>
       </div>
 
-      <div v-else class="flex p-[24px]" v-if="showFooter">
-        <div class="flex items-center justify-start gap-[4px]" v-if="footerTip">
+      <div v-else style="display: flex; padding: 24px;" v-if="showFooter">
+        <div style="display: flex; align-items: center; justify-content: flex-start; gap: 4px;" v-if="footerTip">
           <svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
             <path
               fill-rule="evenodd"
@@ -91,12 +91,12 @@ const confirmClick = async () => {
               fill="#5A5A5A"
             />
           </svg>
-          <div class="text-[12px] text-[#5A5A5A]">
+          <div style="font-size: 12px; color: #5A5A5A;">
             {{ footerTip }}
           </div>
         </div>
 
-        <div class="ml-auto">
+        <div style="margin-left: auto;">
           <p-button-rounded
             :width="btnWidth"
             :height="btnHeight"

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, reactive, onMounted, computed, withDefaults } from 'vue'
+import { ref, computed } from 'vue'
 import { Modal as AModal, Button as AButton } from 'ant-design-vue'
 
 const {
@@ -34,7 +34,6 @@ const confirmClick = async () => {
   loading.value = true
   try {
     confirm && (await confirm())
-    // 同时兼容多种回调方式
     emits('confirm')
   } catch (err) {
   } finally {
@@ -47,48 +46,85 @@ const confirmClick = async () => {
 <template>
   <a-modal v-model:visible="show" :width="width" centered wrapClassName="p-modal">
     <template #title v-if="title">
-      <div class="p-[20px] text-[18px] font-bold leading-[27px] text-[#272727]">
+      <div class="modal-title">
         {{ title }}
       </div>
     </template>
-    <div class="border-t border-[#cecece] p-[20px] pb-[0px] text-[16px] text-[#272727]">
-      <div v-html="content"></div>
 
+    <div class="modal-content">
+      <div v-html="content"></div>
     </div>
 
     <template #footer>
-      <div class="flex justify-end p-[20px]">
+      <div class="modal-footer">
         <a-button
-          class="h-[38px] w-[76px] rounded-[100px]"
-          style="border: 1px solid #272727"
+          class="modal-btn modal-cancel-btn"
           @click="show = false"
-          >取消</a-button
         >
+          取消
+        </a-button>
 
         <a-button
-          class="h-[38px] w-[76px] rounded-[100px] !text-white"
+          class="modal-btn modal-confirm-btn"
           :style="{
             border: 'none',
             backgroundColor: confrimBtnBgColor,
           }"
           @click="confirmClick"
           :loading="loading"
-          >确定</a-button
         >
+          确定
+        </a-button>
       </div>
     </template>
   </a-modal>
 </template>
 
-<style lang="scss">
-.p-modal {
-  .ant-modal {
-    border-radius: 16px !important;
-    overflow: hidden;
-  }
-  .ant-modal-content {
-    padding: 0px !important;
-    border-radius: 16px !important;
-  }
+<style>
+.p-modal .ant-modal {
+  border-radius: 16px !important;
+  overflow: hidden;
+}
+
+.p-modal .ant-modal-content {
+  padding: 0 !important;
+  border-radius: 16px !important;
+}
+
+.modal-title {
+  padding: 20px;
+  font-size: 18px;
+  font-weight: 700;
+  line-height: 27px;
+  color: #272727;
+}
+
+.modal-content {
+  border-top: 1px solid #cecece;
+  padding: 20px;
+  padding-bottom: 0;
+  font-size: 16px;
+  color: #272727;
+}
+
+.modal-footer {
+  display: flex;
+  justify-content: flex-end;
+  padding: 20px;
+  gap: 8px;
+}
+
+.modal-btn {
+  width: 76px;
+  height: 38px;
+  border-radius: 100px;
+}
+
+.modal-cancel-btn {
+  border: 1px solid #272727;
+}
+
+.modal-confirm-btn {
+  color: #fff !important;
 }
 </style>

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

@@ -83,8 +83,9 @@ const renderTableColumns = (tableColumns: TableColumn[]) => {
       //   return h("div", { style: { display: "flex", justifyContent: "space-around" } }, buttons);
       // };
 
-
-      renderItem.width = renderItem.operateButtons.length * 55;
+      if(!renderItem.width){
+        renderItem.width = renderItem.operateButtons.length * 60;
+      }
 
       if(editColumns.length > 0){
         renderItem.width +=110
@@ -299,11 +300,8 @@ defineExpose({
     rowKey="id"
     :row-selection="rowSelection"
     :columns="columns"
-    :data-source="tableData?.data || []"
+    :data-source="data && data.length >0 ? data : (tableData.data || [])"
     :loading="loading"
-    :scroll="{
-      y: height,
-    }"
     :pagination="data.length >0?  false :{
       current: pageQuery.p,
       defaultPageSize: pageQuery.pc,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "p-pc-ui",
-  "version": "1.3.1",
+  "version": "1.3.4",
   "type": "module",
   "module": "dist/index.ts",
   "main": "dist/index.ts",
@@ -21,7 +21,7 @@
     "vue": "3.5.13"
   },
   "devDependencies": {
-    "typescript": "5.8.3",
-    "@dcloudio/types": "^3.4.8"
+    "ts-node": "^10.9.2",
+    "typescript": "5.8.3"
   }
-}
+}