parking/src/views/backend/enterprise/members/askbuy/index.vue

<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>

    <!-- 表单 -->
    <auditDialog ref="auditDialogRef" @close="baTable.getIndex()"></auditDialog>
  </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";
import useCurrentInstance from "/@/utils/useCurrentInstance";
import _ from "lodash";
import auditDialog from "./auditDialog.vue";
import { ElMessage } from "element-plus";

//注销按钮
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: "=",
        custom: { 0: "", 1: "info" },
        replaceValue: { 0: "委托中", 1: "已撤销" }
      },
      {
        label: "审核状态",
        prop: "releaseStatus",
        align: "center",
        render: "tag",
        operator: "=",
        custom: { 0: "", 1: "success", 3: "info" },
        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();

  const { proxy } = useCurrentInstance();
  /**
   * 表格内的按钮响应
   * @param name 按钮name
   * @param row 被操作行数据
   */
  proxy.eventBus.on("onTableButtonClick", (data: { name: string; row: TableRow }) => {
    if (!baTable.activate) return;
    if (data.name == "audit") {
      infoButtonClick(data.row);
    }
  });
});

let auditDialogRef = ref();

/** 点击按钮事件 */
const infoButtonClick = (row: TableRow) => {
  if (!row) {
    return;
  } else if (row.entrustStatus == 1) {
    ElMessage({ type: "warning", message: "用户已取消委托" });
    return;
  } else if (row.releaseStatus !== 0) {
    ElMessage({ type: "error", message: "该委托已审核" ,grouping:true});
    return;
  }
// 数据来自表格数据,未重新请求api,深克隆,不然可能会影响表格
  let rowClone = _.cloneDeep(row);

  auditDialogRef.value.open(rowClone);
};
</script>


<style scoped lang="scss"></style>