p-pc-ui 1.2.2 → 1.2.5

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>

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

@@ -1,42 +0,0 @@
-
-interface TableBase {
-    title: string;
-    width?: number;
-    sorter?: boolean;
-    align?: 'center' | 'left' | 'right';
-    mapPath?: string[];
-    customRender?: Function;
-    default?: any;
-}
-
-interface TablePic extends TableBase {
-    key: string;
-    type: 'pic';
-    showOssUrlFunc?: (ossKey: string) => string;
-    picWidth?: number;
-    picHeight?: number;
-}
-
-interface TableLink extends TableBase {
-    key: string;
-    type: 'link';
-}
-
-interface TableCommon extends TableBase {
-    key: string;
-    type: 'common';
-}
-
-interface TableDate extends TableBase {
-    key: string;
-    type: 'date';
-    format?: string;
-}
-
-interface TableOperate extends TableBase {
-    type: 'operate',
-    operateButtons: { label: string; click: Function; visibleFunc?: Function }[];
-
-}
-
-export type TableColumn = TableCommon | TablePic | TableLink | TableDate | TableOperate;

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

@@ -1,299 +0,0 @@
-<script lang="ts" setup>
-// 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 * 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();
-
-interface Props {
-  tableColumns: TableColumn[];
-  getData: null | ((query: object) => Promise<{ data: any[]; count: number; pages: { total: number; now: number } }>);
-  searchRenderData?: FormDataItem[];
-  initSearchFormData?: any;
-  height?: number;
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  getData: null,
-  height: 1000,
-  searchRenderData: [] as any,
-});
-
-const pageQuery = reactive({
-  p: 1,
-  pc: 10,
-  od: "-id",
-});
-
-const tableData = reactive({
-  data: [] as any,
-  count: 0,
-  pages: {
-    total: 0,
-    now: 0,
-  },
-});
-
-const emits = defineEmits(["select"]);
-
-const rowSelection = {
-  onChange: (selectedRowKeys, selectedRows) => {
-    emits("select", selectedRowKeys);
-  },
-};
-
-const loading = ref(false);
-
-let searchQuery = {};
-
-const renderTableColumns = (tableColumns: TableColumn[]) => {
-  const returnColumns: any = [];
-  for (const renderItem of tableColumns) {
-    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.align = "center";
-    }
-
-    // 处理默认字段
-    if (!_.isEmpty(renderItem.default)) {
-      renderItem.customRender = ({ text, record }) => {
-        return h("span", text || renderItem.default);
-      };
-    }
-
-    // 解析json字段
-    if (renderItem.key && renderItem.key.includes(".")) {
-      renderItem.customRender = ({ text, record }) => {
-        return h("span", _.get(record, renderItem.key!.split(".")));
-      };
-    }
-
-    if (renderItem.type == "pic") {
-      renderItem.customRender = ({ text, record }) => {
-        const key = renderItem.key;
-        let pics = key.includes(".") ? _.get(record, key.split(".")) : _.get(record, key);
-        if (_.isEmpty(pics)) return h("span", "暂无");
-        pics = _.isArray(pics) ? pics : [pics];
-        const format_pics: any = [];
-        for (const pic_item of pics) {
-          if (!pic_item.includes("http") && renderItem.showOssUrlFunc) {
-            format_pics.push(renderItem.showOssUrlFunc(pic_item));
-          } else {
-            format_pics.push(pic_item);
-          }
-        }
-
-        return h(
-          "a",
-          {
-            onClick: () => {
-              viewerApi({ images: format_pics });
-            },
-          },
-          h("img", {
-            src: format_pics[0],
-            style: {
-              width: (renderItem.picWidth || 60) + "px",
-              height: (renderItem.picHeight || 60) + "px",
-              marginLeft: "10px",
-            },
-          })
-        );
-      };
-    }
-
-    // 处理MAP字段
-    if (renderItem.mapPath) {
-      const mapInfoStr: any = localStorage.getItem("map");
-      const mapInfo = JSON.parse(mapInfoStr);
-      const mapItem = _.get(mapInfo, renderItem.mapPath);
-      renderItem.customRender = ({ text, record }) => {
-        return h("span", mapItem[text]);
-      };
-    }
-
-    if (renderItem.type == "date") {
-      renderItem.customRender = ({ text, record }) => {
-        return h("span", dayjs(text).format(renderItem.format || "YYYY-MM-DD HH:mm:ss"));
-      };
-    }
-
-    renderItem["dataIndex"] = renderItem["key"];
-    returnColumns.push(renderItem);
-  }
-
-  return returnColumns;
-};
-
-const columns = renderTableColumns(props.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;
-  loading.value = false;
-};
-
-const refresh = () => {
-  renderTableData();
-};
-
-const onPageChange = (p) => {
-  pageQuery.p = p;
-  refresh();
-};
-
-const onPageSizeChange = (current, pc) => {
-  pageQuery.p = 1;
-  pageQuery.pc = pc;
-  refresh();
-};
-
-const searchClick = async () => {
-  const query = await SearchFormRef.value.getFormData();
-
-  if (_.isEmpty(query)) return;
-  searchQuery = _.pickBy(query, (value, key) => {
-    return value !== "" && value != undefined;
-  });
-
-  pageQuery.p = 1;
-  refresh();
-};
-
-const resetSearch = () => {
-  searchQuery = {};
-  pageQuery.p = 1;
-  SearchFormRef.value.resetForm();
-  refresh();
-};
-
-const onchange = (pagination, filters, sorter, extra) => {
-  if (!_.isEmpty(sorter)) {
-    const od: any = [];
-
-    if (sorter.order == "ascend") {
-      od.push(sorter.field);
-    } else if (sorter.order == "descend") {
-      od.push(`-${sorter.field}`);
-    } else {
-      od.push("-id");
-    }
-
-    pageQuery.od = od.join(",");
-    refresh();
-  }
-};
-
-const getTableData = () => {
-  return toRaw(tableData)["data"];
-};
-
-onMounted(() => {
-  renderTableData();
-});
-
-defineExpose({
-  refresh,
-  tableData,
-  getTableData,
-});
-</script>
-
-<template>
-  <div v-if="searchRenderData.length > 0" class="search-form">
-    <PForm
-      ref="SearchFormRef"
-      :is-search-form="true"
-      :render-data="searchRenderData"
-      :init-form="initSearchFormData"
-      layout="inline"
-    >
-      <template v-slot:button>
-        <a-button type="primary" @click="searchClick" style="margin-left: 20px"> 搜索 </a-button>
-        <a-button style="margin-left: 10px" @click="resetSearch"> 重置 </a-button>
-      </template>
-    </PForm>
-  </div>
-
-  <div style="display: flex; justify-content: flex-end; margin-bottom: 10px; margin-top: 10px; padding: 20px">
-    <slot name="button"></slot>
-  </div>
-
-  <a-table
-    rowKey="id"
-    :row-selection="rowSelection"
-    :columns="columns"
-    :data-source="tableData?.data || []"
-    :loading="loading"
-    :scroll="{
-      y: height,
-    }"
-    :pagination="{
-      current: pageQuery.p,
-      defaultPageSize: pageQuery.pc,
-      showSizeChanger: true,
-      pageSizeOptions: ['10', '20', '50', '100', '200'],
-      total: tableData.count,
-      onChange: onPageChange,
-      onShowSizeChange: onPageSizeChange,
-    }"
-    bordered
-    @change="onchange"
-  >
-    <template #bodyCell="slotProps">
-      <slot name="bodyCell" v-bind="slotProps" />
-    </template>
-  </a-table>
-</template>
-
-<style>
-.ant-table-striped :deep(.table-striped) td {
-  background-color: #fafafa;
-}
-
-.ant-table-thead > tr > th {
-  position: relative;
-  color: rgba(0, 0, 0, 0.85);
-  font-weight: 500;
-  text-align: left;
-  background: #fafafa !important;
-  border-bottom: 1px solid #f0f0f0;
-  transition: background 0.3s ease;
-}
-
-.search-form {
-  padding: 10px;
-  padding-top: 25px;
-  border-bottom: 10px solid #f5f5f5;
-}
-</style>

package/dist/index.ts

@@ -1,8 +0,0 @@
-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 }
-export type { FormDataItem } from './components/p-form/index.d'
-export type { TableColumn } from './components/p-table/index.d'
-