Project Init

src/api/controllerUrls.ts

@@ -66,3 +66,4 @@ export const store = "/store/"; //门店管理
 export const storeGoods = "/store/goods/"; //门店管理
 export const storeEmployee = "/store/employee/"; //店员管理
 export const ad = "/ad/"; //广告管理
+export const entrust = "/entrust/"; //客户委托

src/views/backend/enterprise/members/entrust/auditDialog.vue

@@ -0,0 +1,14 @@
+<template>
+
+</template>
+
+<script setup lang="ts">
+
+
+
+
+</script>
+
+<style scoped>
+
+</style>

src/views/backend/enterprise/members/entrust/index.vue

@@ -0,0 +1,118 @@
+<template>
+  <div class="default-main ">
+    <el-alert class="ba-table-alert" v-if="baTable.table.remark" :title="baTable.table.remark" type="info"
+              show-icon />
+    <el-row>
+      <el-col :span="24">
+
+        <!-- 表格顶部菜单 -->
+        <TableHeader :buttons="['refresh', 'add', 'edit', 'delete', 'comSearch']"
+                     quick-search-placeholder="通过标题模糊搜索"
+                     @action="baTable.onTableHeaderAction" />
+        <!-- 表格 -->
+        <!-- 要使用`el-table`组件原有的属性，直接加在Table标签上即可 -->
+        <Table @action="baTable.onTableAction" />
+
+      </el-col>
+    </el-row>
+
+    <!-- 表单 -->
+
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, provide } from "vue";
+import { entrust } from "/@/api/controllerUrls";
+import Table from "/@/components/table/index.vue";
+import TableHeader from "/@/components/table/header/index.vue";
+import { defaultOptButtons } from "/@/components/table";
+import { baTableApi } from "/@/api/common";
+import baTableClass from "/@/utils/baTable";
+
+//注销按钮
+let cancelBtn: OptButton[] = [
+  {
+    render: 'tipButton',
+    name: 'audit',
+    title: '审核',
+    text: '审核',
+    type: 'primary',
+    icon: '',
+    class: '',
+    disabledTip: false,
+  },
+]
+
+let btn = defaultOptButtons([])
+btn = btn.concat(cancelBtn)
+
+
+const baTable = new baTableClass(
+  new baTableApi(entrust),
+  {
+    dblClickNotEditColumn: [undefined, "status"],
+    column: [
+      { type: "selection", align: "center", operator: false },
+      {label: '头像', prop: 'headPortrait', align: 'center',render:'image', operator: false},
+      {label: '委托人姓名', prop: 'memberName', align: 'left', operator: 'LIKE'},
+      { label: "所在区县", prop: "districtName", align: "center", operator: "LIKE" },
+      { label: "所在小区", prop: "communityName", align: "center", operator: "LIKE" },
+      { label: "楼号", prop: "buildingNumber", align: "center", operator: "LIKE" },
+      { label: "车位号码", prop: "parkingNumber", align: "center", operator: "LIKE" },
+      {
+        label: "委托类型",
+        prop: "entrustType",
+        align: "center",
+        render: "tag",
+        operator: "=",
+        replaceValue: { 0: "租售", 1: "出租", 3: "出售" }
+      },
+      {
+        label: "委托状态",
+        prop: "entrustStatus",
+        align: "center",
+        render: "tag",
+        operator: "=",
+        replaceValue: { 0: "委托中", 1: "已撤销" }
+      },
+      {
+        label: "审核状态",
+        prop: "releaseStatus",
+        align: "center",
+        render: "tag",
+        operator: "=",
+        replaceValue: { 0: "待审核", 1: "审核通过", 3: "审核驳货" }
+      },
+      { label: "创建时间", prop: "createTime", align: "center", width: "180", operator: false },
+      {
+        label: '操作',
+        align: 'center',
+        width: '80',
+        render: 'buttons',
+        buttons: btn,
+        operator: false
+      },
+    ]
+  },
+  {
+    defaultItems: {}
+  },
+  {
+    // 获得编辑数据后
+    requestEdit: () => {
+      if (baTable.form.items && !baTable.form.items.icon) baTable.form.items.icon = "el-icon-Minus";
+    }
+  }
+);
+
+provide("baTable", baTable);
+
+onMounted(() => {
+  baTable.mount();
+  baTable.getIndex();
+});
+</script>
+
+
+<style scoped lang="scss"></style>

types/table.d.ts

@@ -1,167 +1,170 @@
-import type { TagProps, ButtonType, ElForm } from 'element-plus'
-import Table from '/@/components/table/index.vue'
+import type { TagProps, ButtonType, ElForm } from "element-plus";
+import Table from "/@/components/table/index.vue";
+
 declare global {
-    /* baTable */
-    interface BaTable {
-        ref?: typeof Table
-        pk?: string
-        data?: TableRow[]
-        remark?: string | null
-        loading?: boolean
-        expandAll?: boolean
-        selection?: TableRow[]
-        dblClickNotEditColumn?: (string | undefined)[]
-        column: TableColumn[]
-        total?: number
-        filter?: anyObj
-        defaultOrder?: { prop: string; order: string }
-        dragSortLimitField?: string
-        acceptQuery?: boolean
-        extend?: anyObj
-        actionStruct?:actionStruct,
-        tableName?:string,
-        rowStyle?:string,
-        headerRowStyle?:string
-    }
-
-    /* baTableForm */
-    interface BaTableForm {
-        ref?: InstanceType<typeof ElForm> | undefined
-        labelWidth?: number
-        operate?: string
-        operateIds?: string[]
-        items?: anyObj
-        submitLoading?: boolean
-        defaultItems?: anyObj
-        loading?: boolean
-        extend?: anyObj
-    }
-
-    /* BaTable前置处理函数(前置埋点) */
-    interface BaTableBefore {
-        getIndex?: Function
-        postDel?: Function
-        requestEdit?: Function
-        onTableDblclick?: Function
-        toggleForm?: Function
-        onSubmit?: Function
-        onTableAction?: Function
-        onTableHeaderAction?: Function
-        mount?: Function
-        [key: string]: Function | undefined
-    }
-
-    /* BaTable后置处理函数(后置埋点) */
-    interface BaTableAfter {
-        getIndex?: Function
-        postDel?: Function
-        requestEdit?: Function
-        onTableDblclick?: Function
-        toggleForm?: Function
-        onSubmit?: Function
-        onTableAction?: Function
-        onTableHeaderAction?: Function
-        mount?: Function
-        [key: string]: Function | undefined
-    }
-
-    interface ComSearch {
-        form: anyObj
-        fieldData: Map<string, any>
-    }
-
-    /* 表格列 */
-    interface TableColumn extends ElTableColumn {
-        // 是否显示
-        show?: boolean
-        // 渲染为:icon|switch|image|images|tag|url|datetime|buttons
-        render?: string
-        // 操作按钮组
-        buttons?: OptButton[]
-        // 渲染为Tag时:el-tag 组件的主题
-        effect?: TagProps['effect']
-        // 渲染为Tag时:el-tag 组件的size
-        size?: TagProps['size']
-        // 自定义数据:比如渲染为Tag时,可以指定不同值时的Tag的Type属性 { open: 'success', close: 'info' }
-        custom?: any
-        // 渲染为链接时,链接的打开方式
-        target?: aTarget
-        // 渲染为:a|buttons的点击事件
-        click?: Function
-        // 渲染为 datetime 时的格式化方式,字母可以自由组合:y=年,m=月,d=日,h=时,M=分,s=秒
-        timeFormat?: 'yyyy-mm-dd hh:MM:ss'
-        // 默认值
-        default?: any
-        // 值替换数据,如{open: '开'}
-        replaceValue?: any
-        // 自定义渲染方式时,渲染时对值的预处理方法
-        renderFormatter?: Function
-        // 通用搜索操作符,默认值为=,false禁用此字段通用搜索,支持的操作符见下定义
-        operator?: boolean | OperatorStr
-        // 通用搜索框的placeholder
-        operatorPlaceholder?: string
-    }
-
-    /* 表格右侧操作按钮 */
-    interface OptButton {
-        // 渲染方式:tipButton=带tip的按钮,confirmButton=带确认框的按钮,moveButton=移动按钮
-        render: string
-        name: string
-        title?: string
-        text?: string
-        class?: string
-        type: ButtonType
-        icon: string
-        popconfirm?: any
-        disabledTip?: boolean
-    }
-
-    /* 表格行 */
-    interface TableRow extends anyObj {
-        children?: TableRow[]
-    }
-
-    /* 表头支持的按钮 */
-    type HeaderOptButton = 'refresh' | 'add' | 'edit' | 'delete' | 'unfold' | 'recycle bin' | 'comSearch'
-
-    /* 通用搜索操作符支持的值 */
-    type OperatorStr =
-        | '=' // 等于，默认值
-        | '<>'
-        | '>'
-        | '>='
-        | '<'
-        | '<='
-        | 'LIKE'
-        | 'NOT LIKE'
-        | 'IN'
-        | 'NOT IN'
-        | 'RANGE' // 范围，将生成两个输入框 以输入最小值和最大值
-        | 'NOT RANGE'
-        | 'NULL' // 是否为NULL，将生成单个复选框
-        | 'NOT NULL'
-        | 'FIND_IN_SET'
-
-    /* 链接打开方式 */
-    type aTarget = '_blank' | '_self'
-
-    /* 通用搜索事件返回的Data */
-    interface comSearchData {
-        field: string
-        val: string
-        operator: string
-        render: string
-    }
-
-    interface ElTreeData {
-        label: string
-        children?: ElTreeData[]
-    }
-
-    interface actionStruct{
-        name:string
-        data:any
-    }
+  /* baTable */
+  interface BaTable {
+    ref?: typeof Table
+    pk?: string
+    data?: TableRow[]
+    remark?: string | null
+    loading?: boolean
+    expandAll?: boolean
+    selection?: TableRow[]
+    dblClickNotEditColumn?: (string | undefined)[]
+    column: TableColumn[]
+    total?: number
+    filter?: anyObj
+    defaultOrder?: { prop: string; order: string }
+    dragSortLimitField?: string
+    acceptQuery?: boolean
+    extend?: anyObj
+    actionStruct?: actionStruct,
+    tableName?: string,
+    rowStyle?: string,
+    headerRowStyle?: string
+  }
+
+  /* baTableForm */
+  interface BaTableForm {
+    ref?: InstanceType<typeof ElForm> | undefined;
+    labelWidth?: number;
+    operate?: string;
+    operateIds?: string[];
+    items?: anyObj;
+    submitLoading?: boolean;
+    defaultItems?: anyObj;
+    loading?: boolean;
+    extend?: anyObj;
+  }
+
+  /* BaTable前置处理函数(前置埋点) */
+  interface BaTableBefore {
+    getIndex?: Function;
+    postDel?: Function;
+    requestEdit?: Function;
+    onTableDblclick?: Function;
+    toggleForm?: Function;
+    onSubmit?: Function;
+    onTableAction?: Function;
+    onTableHeaderAction?: Function;
+    mount?: Function;
+
+    [key: string]: Function | undefined;
+  }
+
+  /* BaTable后置处理函数(后置埋点) */
+  interface BaTableAfter {
+    getIndex?: Function;
+    postDel?: Function;
+    requestEdit?: Function;
+    onTableDblclick?: Function;
+    toggleForm?: Function;
+    onSubmit?: Function;
+    onTableAction?: Function;
+    onTableHeaderAction?: Function;
+    mount?: Function;
+
+    [key: string]: Function | undefined;
+  }
+
+  interface ComSearch {
+    form: anyObj;
+    fieldData: Map<string, any>;
+  }
+
+  /* 表格列 */
+  interface TableColumn extends ElTableColumn {
+    // 是否显示
+    show?: boolean;
+    // 渲染为:icon|switch|image|images|tag|url|datetime|buttons
+    render?: string;
+    // 操作按钮组
+    buttons?: OptButton[];
+    // 渲染为Tag时:el-tag 组件的主题
+    effect?: TagProps["effect"];
+    // 渲染为Tag时:el-tag 组件的size
+    size?: TagProps["size"];
+    // 自定义数据:比如渲染为Tag时,可以指定不同值时的Tag的Type属性 { open: 'success', close: 'info' }
+    custom?: any;
+    // 渲染为链接时,链接的打开方式
+    target?: aTarget;
+    // 渲染为:a|buttons的点击事件
+    click?: Function;
+    // 渲染为 datetime 时的格式化方式,字母可以自由组合:y=年,m=月,d=日,h=时,M=分,s=秒
+    timeFormat?: "yyyy-mm-dd hh:MM:ss";
+    // 默认值
+    default?: any;
+    // 值替换数据,如{open: '开'}
+    replaceValue?: any;
+    // 自定义渲染方式时,渲染时对值的预处理方法
+    renderFormatter?: Function;
+    // 通用搜索操作符,默认值为=,false禁用此字段通用搜索,支持的操作符见下定义
+    operator?: boolean | OperatorStr;
+    // 通用搜索框的placeholder
+    operatorPlaceholder?: string;
+  }
+
+  /* 表格右侧操作按钮 */
+  interface OptButton {
+    // 渲染方式:tipButton=带tip的按钮,confirmButton=带确认框的按钮,moveButton=移动按钮
+    render: string;
+    name: string;
+    title?: string;
+    text?: string;
+    class?: string;
+    type: ButtonType;
+    icon: string;
+    popconfirm?: any;
+    disabledTip?: boolean;
+  }
+
+  /* 表格行 */
+  interface TableRow extends anyObj {
+    children?: TableRow[];
+  }
+
+  /* 表头支持的按钮 */
+  type HeaderOptButton = "refresh" | "add" | "edit" | "delete" | "unfold" | "recycle bin" | "comSearch"
+
+  /* 通用搜索操作符支持的值 */
+  type OperatorStr =
+    | "=" // 等于，默认值
+    | "<>"
+    | ">"
+    | ">="
+    | "<"
+    | "<="
+    | "LIKE"
+    | "NOT LIKE"
+    | "IN"
+    | "NOT IN"
+    | "RANGE" // 范围，将生成两个输入框 以输入最小值和最大值
+    | "NOT RANGE"
+    | "NULL" // 是否为NULL，将生成单个复选框
+    | "NOT NULL"
+    | "FIND_IN_SET"
+
+  /* 链接打开方式 */
+  type aTarget = "_blank" | "_self"
+
+  /* 通用搜索事件返回的Data */
+  interface comSearchData {
+    field: string;
+    val: string;
+    operator: string;
+    render: string;
+  }
+
+  interface ElTreeData {
+    label: string;
+    children?: ElTreeData[];
+  }
+
+  interface actionStruct {
+    name: string;
+    data: any;
+  }
 
 }
 
@@ -171,31 +174,31 @@ declare global {
  * https://element-plus.org/zh-CN/component/table.html#table-column-attributes
  */
 interface ElTableColumn {
-    type?: 'selection' | 'index' | 'expand'
-    index?: number | Function
-    label?: string
-    'column-key'?: string
-    prop?: string
-    width?: string | number
-    'min-width'?: string | number
-    fixed?: string | boolean
-    'render-header'?: Function
-    sortable?: string | boolean
-    'sort-method'?: Function
-    'sort-by'?: Function
-    'sort-orders'?: string[] | null[]
-    resizable?: boolean
-    formatter?: Function
-    'show-overflow-tooltip'?: boolean
-    align?: 'left' | 'center' | 'right'
-    'header-align'?: 'left' | 'center' | 'right'
-    'class-name'?: string
-    'label-class-name'?: string
-    selectable?: Function
-    'reserve-selection'?: boolean
-    filters?: { key: string; value: string }[]
-    'filter-placement'?: string
-    'filter-multiple'?: boolean
-    'filter-method'?: Function
-    'filtered-value'?: any[]
+  type?: "selection" | "index" | "expand";
+  index?: number | Function;
+  label?: string;
+  "column-key"?: string;
+  prop?: string;
+  width?: string | number;
+  "min-width"?: string | number;
+  fixed?: string | boolean;
+  "render-header"?: Function;
+  sortable?: string | boolean;
+  "sort-method"?: Function;
+  "sort-by"?: Function;
+  "sort-orders"?: string[] | null[];
+  resizable?: boolean;
+  formatter?: Function;
+  "show-overflow-tooltip"?: boolean;
+  align?: "left" | "center" | "right";
+  "header-align"?: "left" | "center" | "right";
+  "class-name"?: string;
+  "label-class-name"?: string;
+  selectable?: Function;
+  "reserve-selection"?: boolean;
+  filters?: { key: string; value: string }[];
+  "filter-placement"?: string;
+  "filter-multiple"?: boolean;
+  "filter-method"?: Function;
+  "filtered-value"?: any[];
 }