✨ feat([drp-采购员上级采购经理匹配]): 采购员上级采购经理匹配页面开发

包含：列表、检索、详情、新增、模板下载、批量导入、导出、启用、停用  ——v1

流程还未提交

src/api/business/purchase/apply.js

@@ -37,7 +37,7 @@ export function REMOVE(data) {
   return request({
     url: `/pu/priceApply/del`,
     method: "delete",
-    data: {submitIds:data},
+    data: { submitIds: data },
   });
 }
 
@@ -67,3 +67,11 @@ export function oaBack(data) {
     data: data,
   });
 }
+// 获取调价类型、单价差、涨幅、预计年影响金额
+export function PRICE(data) {
+  return request({
+    url: `/pu/price/catalogue/getPriceData`,
+    method: "POST",
+    data: data,
+  });
+}

src/api/business/purchase/match.js

@@ -0,0 +1,70 @@
+// 采购员上级采购经理匹配
+import request from "@/utils/request";
+
+// 列表
+export const LIST = (data, page) => {
+  return request({
+    url: `/pu/match/list`,
+    method: "post",
+    data,
+    params: page,
+  });
+}
+// 新增
+export const ADD = (data) => {
+  return request({
+    url: `/pu/match`,
+    method: "post",
+    data,
+  });
+}
+// 编辑
+export const EDIT = (data) => {
+  return request({
+    url: `/pu/match`,
+    method: "PUT",
+    data,
+  });
+}
+
+// 详情
+export const DETAILS = (params) => {
+  return request({
+    url: `/pu/match/${params.id}`,
+    method: "GET",
+    // params,
+  });
+}
+// 删除
+export const DELETE = (data) => {
+  return request({
+    url: `/pu/match`,
+    method: "DELETE",
+    data,
+  });
+}
+// 导入
+export const IMPORT = (data) => {
+  return request({
+    url: `/pu/match/import`,
+    method: "post",
+    data,
+  });
+}
+// 启用/停用
+export const ENABLE = (data) => {
+  return request({
+    url: `/pu/match/enable`,
+    method: "put",
+    data,
+  });
+}
+
+// 导出
+export const EXPORT = (data) => {
+  return request({
+    url: `/pu/match/export`,
+    method: "post",
+    data,
+  });
+}

src/components/popover-tree-select/index.vue

@@ -177,11 +177,7 @@ export default {
         for (let key in dataMapping) {
           source[key] = prop[0][dataMapping[key]];
         }
-        this.innerValue = prop[0][valueKey];
-        console.log(valueKey, "valueKey");
-        console.log(prop[0][valueKey], "prop[0][valueKey]");
-        console.log(this.innerValue, "innerValue");
-        console.log(source, "source");
+        this.innerValue = prop[0][valueKey]
         this.$emit("update:source", source);
         this.$emit("change", prop, this.$props);
       } else {

src/components/popover-tree-select/multiple.vue

@@ -46,6 +46,10 @@ export default {
         };
       },
     },
+    isFirst: {
+      type: Boolean,
+      default: false,
+    },
   },
   components: {},
   data() {
@@ -98,14 +102,21 @@ export default {
     async fetchList(prop) {
       try {
         this.loading = true;
-        const { referName: type, source, queryParams } = this.$props;
+        const { referName: type, source, queryParams, isFirst } = this.$props;
         const { code, rows } = await REFER({
           ...prop,
           ...queryParams(source),
           type: type,
         });
         if (code === 200) {
-          this.data = rows;
+          this.data = !isFirst
+            ? rows
+            : rows.map((item) => {
+                return {
+                  ...item,
+                  children: [],
+                };
+              });
         }
       } catch (err) {
         // catch
@@ -147,7 +158,7 @@ export default {
     // confirm
     useConfirm(prop) {
       const {
-        $props: { valueKey },
+        $props: { valueKey, dataMapping, source },
       } = this;
       // string
       if (typeof valueKey === "string") {
@@ -157,9 +168,14 @@ export default {
       else {
         this.innerValue = prop;
       }
+
+      for (let key in dataMapping) {
+        source[key] = prop.map((item) => item[dataMapping[key]]);
+      }
       //
       this.hide();
       this.lastSelectData = deepCopy(prop);
+      console.log("change", prop, this.$props);
       this.$emit("change", prop, this.$props);
     },
   },
@@ -272,6 +288,11 @@ export default {
   </div>
 </template>
 <style scoped>
+.el-tree {
+  height: 450px;
+  overflow-y: auto;
+  overflow-x: hidden;
+}
 .popover-tree-select .el-input {
   width: inherit;
 }
@@ -289,4 +310,8 @@ export default {
 ::v-deep .el-table--mini .el-table__cell {
   height: 50px;
 }
+
+>>> .el-dialog__body {
+  padding: 10px 20px !important;
+}
 </style>

src/views/purchase/pu-match/columns.js

@@ -0,0 +1,90 @@
+export default function useColumns() {
+  const SearchColumns = [
+    {
+      item: { key: "buyerName", title: "采购员名称", },
+      attr: {
+        is: "el-popover-select-v2",
+        valueKey: "name",
+        referName: "CONTACTS_PARAM",
+        dataMapping: { buyer: "code", },
+        clearable: true,
+      }
+    },
+    {
+      item: { key: "buyManageName", title: "上级采购经理名称", },
+      attr: {
+        is: "el-popover-select-v2",
+        valueKey: "name",
+        referName: "CONTACTS_PARAM",
+        dataMapping: { buyManage: "code", },
+        clearable: true,
+      }
+    },
+    {
+      item: { key: "classOneNameList", title: "一级分类", },
+      attr: {
+        is: "el-popover-multiple-tree-select",
+        referName: "MATERIALCLASSIFY_PARAM",
+        placeholder: "请输入一级分类",
+        valueKey: "name",
+        isFirst: true,
+        defaultProps: {
+          label: function (data, node) {
+            return data.code + "-" + data.name;
+          },
+          children: "children",
+        },
+        dataMapping: {
+          classOneList: "code",
+        },
+        clearable: true,
+      }
+    },
+    {
+      item: { key: "enable", title: "启用状态", },
+      attr: {
+        is: "el-select",
+        dictName: "sys_enable",
+        clearable: true,
+      }
+    },
+  ];
+
+  const TableColumns = [
+    {
+      item: { key: "buyerName", title: "采购员名称", },
+      attr: {}
+    },
+    {
+      item: { key: "buyManageName", title: "上级采购经理名称", },
+      attr: {}
+    },
+    {
+      item: { key: "buyManage", title: "上级采购经理编码", },
+      attr: {}
+    },
+    {
+      item: { key: "classOneName", title: "一级分类", },
+      attr: {
+
+      }
+    },
+    {
+      item: { key: "enable", title: "启用状态", },
+      attr: {
+        is: "el-dict-tag",
+        dictName: "sys_enable",
+      }
+    },
+  ].map(({ item, attr }) => ({
+    attr,
+    item: {
+      ...item,
+      sortabled: true,
+      fixedabled: true,
+      filterabled: true,
+      hiddenabled: true,
+    },
+  }));
+  return { SearchColumns, TableColumns }
+}

src/views/purchase/pu-match/details/columns.js

@@ -0,0 +1,76 @@
+
+export default function useColumns() {
+  const FormColumns = [
+    {
+      item: { key: "buyerName", title: "采购员名称", required: true, },
+      attr: {
+        is: "el-popover-select-v2",
+        valueKey: "name",
+        referName: "CONTACTS_PARAM",
+        dataMapping: { buyer: "code", },
+        clearable: true,
+      }
+    },
+    {
+      item: { key: "buyer", title: "采购员编码", required: true, },
+      attr: {
+        is: "el-input",
+        readonly: true,
+      }
+    },
+    {
+      item: { key: "buyManageName", title: "上级采购经理名称", required: true, },
+      attr: {
+        is: "el-popover-select-v2",
+        valueKey: "name",
+        referName: "CONTACTS_PARAM",
+        dataMapping: { buyManage: "code", },
+        clearable: true,
+      }
+    },
+    {
+      item: { key: "buyManage", title: "上级采购经理编码", required: true, },
+      attr: {
+        is: "el-input",
+        readonly: true,
+      }
+    },
+    {
+      item: { key: "classOneNameList", title: "一级分类", required: true, },
+      attr: {
+        is: "el-popover-multiple-tree-select",
+        referName: "MATERIALCLASSIFY_PARAM",
+        placeholder: "请输入一级分类",
+        valueKey: "name",
+        isFirst: true,
+        defaultProps: {
+          label: function (data, node) {
+            return data.code + "-" + data.name;
+          },
+          children: "children",
+        },
+        dataMapping: {
+          classOneList: "code",
+        },
+        clearable: true,
+      }
+    },
+    {
+      item: { key: "enable", title: "启用状态", required: true, },
+      attr: {
+        is: "el-select",
+        dictName: "sys_enable",
+        clearable: true,
+      }
+    },
+  ].map(({ item, attr }) => {
+    return {
+      attr,
+      item: {
+        ...item,
+        span: 6
+      }
+    }
+  });
+  return { FormColumns }
+}

src/views/purchase/pu-match/details/index.vue

@@ -0,0 +1,184 @@
+<!-- 采购员上级采购经理匹配——详情 -->
+<script>
+import useColumns from "./columns";
+import { ADD, DETAILS, EDIT } from "@/api/business/purchase/match";
+export default {
+  name: "MatchDetails",
+  props: {
+    dict: {
+      type: Object,
+    },
+    addType: {
+      type: String,
+      default: "add",
+    },
+    data: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  components: {
+    ElSuperForm: () => import("@/components/super-form/index.vue"),
+  },
+  data() {
+    const { FormColumns } = useColumns();
+    const params = this.$init.params(FormColumns);
+    const rules = this.$init.rules(FormColumns);
+    return {
+      rules,
+      params: {
+        ...params,
+        enable: "0",
+      },
+      FormColumns,
+      width: "100%",
+      visible: false,
+      loading: false,
+    };
+  },
+  computed: {
+    title: {
+      get() {
+        const { addType } = this;
+        if (addType === "add") {
+          return "新 增";
+        }
+        if (addType === "edit") {
+          return "编 辑";
+        }
+        return "查 看";
+      },
+      set() {},
+    },
+    innerValue: {
+      get() {
+        let { data } = this.$props;
+        return data.length ? data[0] : null;
+      },
+      set() {},
+    },
+  },
+  methods: {
+    setVisible(prop) {
+      this.visible = prop;
+    },
+    //
+    async fetchItem(id) {
+      try {
+        this.loading = true;
+        let { code, msg, data } = await DETAILS({ id });
+        if (code === 200) {
+          this.params = data;
+        }
+      } catch (error) {
+      } finally {
+        this.loading = false;
+      }
+    },
+    beforeOpen() {
+      let {
+        $props: { addType },
+        innerValue,
+      } = this;
+      if (addType !== "add") {
+        this.fetchItem(innerValue.id);
+      }
+    },
+    hide() {
+      this.visible = false;
+      this.params = { ...this.$init.params(this.FormColumns), enable: "0" };
+      this.$emit("refresh");
+    },
+    useSave(prop) {
+      this.$refs[prop].$refs[prop].validate(async (valid) => {
+        if (valid) {
+          try {
+            this.loading = true;
+            let {
+              $props: { addType },
+              params,
+            } = this;
+            let { code, msg } =
+              addType === "edit"
+                ? await EDIT({ ...params })
+                : await ADD({ ...params });
+            if (code === 200) {
+              this.$notify.success(msg);
+              this.hide();
+            }
+          } catch (err) {
+            console.error(err);
+          } finally {
+            this.loading = false;
+          }
+        } else {
+          return false;
+        }
+      });
+    },
+  },
+  created() {},
+};
+</script>
+<template>
+  <el-drawer
+    v-bind="$attrs"
+    v-on="$listeners"
+    :size="width"
+    :visible.sync="visible"
+    destroy-on-close
+    :show-close="false"
+    @close="hide"
+    @open="beforeOpen"
+    v-loading="loading"
+  >
+    <div
+      slot="title"
+      style="display: flex; justify-content: space-between; align-items: center"
+    >
+      <h3>{{ title }}</h3>
+      <div>
+        <el-button
+          v-show="addType !== 'see'"
+          type="primary"
+          :size="$attrs.size"
+          :loading="loading"
+          @click="useSave('superForm')"
+          >保 存</el-button
+        >
+        <el-button :size="$attrs.size" :loading="loading" @click="hide"
+          >取 消</el-button
+        >
+      </div>
+    </div>
+    <el-super-form
+      v-model="params"
+      :dict="dict"
+      :rules="rules"
+      :size="$attrs.size"
+      :columns="FormColumns"
+      ref="superForm"
+      label-width="auto"
+      label-position="right"
+      style="padding: 20px"
+      :disabled="addType === 'see'"
+    >
+      <!-- <template slot="puOrgName" slot-scope="scope">
+        <component
+          v-bind="scope.attr"
+          v-model="scope.row[scope.item.key]"
+          :size="$attrs.size"
+          :source.sync="scope.row"
+        >
+        </component
+      ></template> -->
+    </el-super-form>
+  </el-drawer>
+</template>
+
+<style scoped>
+>>> .el-drawer__header {
+  margin-bottom: 0;
+  padding: 5px 20px;
+}
+</style>

src/views/purchase/pu-match/dicts.js

@@ -0,0 +1,14 @@
+import { initDicts } from "@/utils/init.js";
+const modules = require.context("./", true, /columns.js$/);
+const columns = [];
+modules.keys().forEach((fileName) => {
+  const data = modules(fileName).default();
+  for (const key in data) {
+    if (key === "TabColumns") {
+      columns.push(...data[key].map((item) => item.TableColumns).flat());
+    } else {
+      columns.push(...data[key]);
+    }
+  }
+});
+export const dicts = initDicts(columns);

src/views/purchase/pu-match/fun-button/daochu/index.vue

@@ -0,0 +1,69 @@
+<!-- 导出 -->
+<script>
+import { EXPORT } from "@/api/business/purchase/match";
+
+export default {
+  name: "export",
+  props: {
+    selectData: {
+      type: Array,
+      default: () => [],
+    },
+    params: {
+      type: Object,
+      default: () => {},
+    },
+  },
+  data() {
+    return {
+      title: "导 出",
+    };
+  },
+  computed: {
+    disabled: {
+      get() {
+        return false;
+      },
+      set() {},
+    },
+  },
+  methods: {
+    async useClick() {
+      try {
+        this.$modal.loading("正在导出数据，请稍后...");
+        let { selectData, params } = this.$props;
+
+        let res = await EXPORT({ ...params });
+        if (res) {
+          const blob = new Blob([res], {
+            type: "application/vnd.ms-excel;charset=UTF-8",
+          }); // 创建一个类文件对象：Blob对象表示一个不可变的、原始数据的类文件对象
+          const downloadElement = document.createElement("a"); //创建a标签
+          const href = window.URL.createObjectURL(blob); // 创建下载的链接
+          downloadElement.href = href; //下载地址
+          downloadElement.download =
+            "采购员上级采购经理匹配表" + new Date().getTime() + ".xlsx"; // 下载后文件名
+          document.body.appendChild(downloadElement);
+          downloadElement.click(); // 点击下载
+          document.body.removeChild(downloadElement); // 下载完成移除元素
+          window.URL.revokeObjectURL(href); // 释放blob对象s
+        }
+      } catch (error) {
+      } finally {
+        this.$modal.closeLoading();
+      }
+    },
+  },
+  created() {},
+};
+</script>
+<template>
+  <el-button
+    v-bind="$attrs"
+    v-on="$listeners"
+    :size="$attrs.size"
+    :disabled="disabled"
+    @click="useClick"
+    >{{ title }}</el-button
+  >
+</template>

src/views/purchase/pu-match/fun-button/plsc/index.vue

@@ -0,0 +1,62 @@
+<!-- 批量删除 -->
+<script>
+import { DELETE } from "@/api/business/purchase/match";
+
+export default {
+  name: "plsc",
+  props: {
+    selectData: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  data() {
+    return {
+      title: "批量删除",
+    };
+  },
+  computed: {
+    disabled: {
+      get() {
+        let { selectData } = this.$props;
+        if (selectData.length) {
+          return false;
+        }
+        return true;
+      },
+      set() {},
+    },
+  },
+  methods: {
+    async useClick() {
+      this.$modal.confirm("是否确认删除？").then(async () => {
+        try {
+          this.$modal.loading("处理中，请稍候...");
+          let { selectData } = this.$props;
+          let ids = selectData.map((item) => item.id);
+          let { code, msg } = await DELETE({ ids });
+          if (code === 200) {
+            this.$notify.success(msg);
+            this.$emit("refresh");
+          }
+        } catch (error) {
+        } finally {
+          this.$modal.closeLoading();
+        }
+      });
+    },
+  },
+  created() {},
+};
+</script>
+<template>
+  <el-button
+    v-bind="$attrs"
+    v-on="$listeners"
+    :size="$attrs.size"
+    :disabled="disabled"
+    v-hasPermi="['pu:match:remove']"
+    @click="useClick"
+    >{{ title }}</el-button
+  >
+</template>

src/views/purchase/pu-match/fun-button/ty-qy/index.vue

@@ -0,0 +1,99 @@
+<!-- 停用启用 -->
+<script>
+import { ENABLE } from "@/api/business/purchase/match";
+export default {
+  name: "TingYong-QiYong",
+  props: {
+    selectData: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  data() {
+    return {};
+  },
+  computed: {
+    // 0:启用   2:停用
+    qyDisabled: {
+      get() {
+        let { selectData } = this.$props;
+        if (selectData.length) {
+          let ty = selectData.findIndex((item) => item.enable === "0");
+          if (ty === -1) {
+            return false;
+          }
+        }
+        return true;
+      },
+      set() {},
+    },
+    tyDisabled: {
+      get() {
+        let { selectData } = this.$props;
+        if (selectData.length) {
+          let ty = selectData.findIndex((item) => item.enable === "2");
+          if (ty === -1) {
+            return false;
+          }
+        }
+        return true;
+      },
+      set() {},
+    },
+  },
+  methods: {
+    //
+    async useStart() {
+      try {
+        this.$modal.loading("处理中，请稍候...");
+        let ids = this.$props.selectData.map((item) => item.id);
+        let { code, msg } = await ENABLE({
+          ids,
+          enable: "0",
+        });
+        if (code === 200) {
+          this.$notify.success(msg);
+          this.$emit("refresh");
+        }
+      } catch (error) {
+      } finally {
+        this.$modal.closeLoading();
+      }
+    },
+    //
+    async useStop() {
+      try {
+        this.$modal.loading("处理中，请稍候...");
+        let ids = this.$props.selectData.map((item) => item.id);
+        let { code, msg } = await ENABLE({
+          ids,
+          enable: "2",
+        });
+        if (code === 200) {
+          this.$notify.success(msg);
+          this.$emit("refresh");
+        }
+      } catch (error) {
+      } finally {
+        this.$modal.closeLoading();
+      }
+    },
+  },
+  created() {},
+};
+</script>
+
+<template>
+  <el-button-group>
+    <el-button
+      type="primary"
+      :size="$attrs.size"
+      :disabled="qyDisabled"
+      @click="useStart"
+      >启用</el-button
+    >
+    <el-button :size="$attrs.size" :disabled="tyDisabled" @click="useStop"
+      >停用</el-button
+    >
+  </el-button-group>
+</template>

src/views/purchase/pu-match/index.vue

@@ -0,0 +1,231 @@
+<!-- 采购员上级采购经理匹配 -->
+<script>
+import useColumns from "./columns";
+import { dicts } from "./dicts";
+import { LIST, IMPORT } from "@/api/business/purchase/match";
+export default {
+  name: "pu-match",
+  dicts: [...dicts],
+  components: {
+    MatchDetails: () => import("./details/index.vue"),
+    PlscButton: () => import("./fun-button/plsc/index.vue"),
+    DcButton: () => import("./fun-button/daochu/index.vue"),
+    BatchImport: () => import("@/components/BatchImport/index.vue"),
+    ElSuperSearch: () => import("@/components/super-search/index.vue"),
+    ElSuperUxTable: () => import("@/components/super-ux-table/index.vue"),
+    TyQyButton: () => import("./fun-button/ty-qy/index.vue"),
+  },
+  data() {
+    const { SearchColumns, TableColumns } = useColumns();
+    const page = this.$init.page();
+    const params = this.$init.params(SearchColumns);
+    return {
+      page,
+      params,
+      size: "mini",
+      TableColumns,
+      SearchColumns,
+      loading: false,
+      tableData: [],
+      selectData: [],
+      addType: "add",
+    };
+  },
+  computed: {},
+  methods: {
+    //
+    async useQuery(params, page) {
+      try {
+        this.loading = true;
+        let { code, rows, total } = await LIST({ ...params, ...page });
+        if (code === 200) {
+          this.tableData = rows;
+          this.page.total = total;
+        }
+      } catch (error) {
+      } finally {
+        this.loading = false;
+      }
+    },
+    // 重置
+    useReset() {
+      this.page = this.$init.page();
+      this.params = this.$init.params(this.SearchColumns);
+      this.useQuery(this.params, this.page);
+    },
+    //
+    useAdd() {
+      this.addType = "add";
+      let { setVisible } = this.$refs.matcDetails;
+      setVisible(true);
+    },
+    //
+    useEdit(prop) {
+      this.addType = "edit";
+      this.selectData = [{ ...prop }];
+      let { setVisible } = this.$refs.matcDetails;
+      setVisible(true);
+    },
+    //
+    useSee(prop) {
+      this.addType = "see";
+      this.selectData = [{ ...prop }];
+      let { setVisible } = this.$refs.matcDetails;
+      setVisible(true);
+    },
+    // 导入
+    async handelImport(fileList) {
+      try {
+        this.$modal.loading("正在上传文件，请稍候...");
+
+        let formData = new FormData();
+
+        formData.append("file", fileList[0].raw);
+
+        let { code, data, msg } = await IMPORT(formData);
+
+        if (code === 200) {
+          let { setVisible } = this.$refs.batchImport;
+
+          setVisible(false);
+          this.$notify.success(msg);
+          this.useQuery(this.params, this.page);
+        }
+      } catch (error) {
+      } finally {
+        this.$modal.closeLoading();
+      }
+    },
+    // 模板下载
+    handleTemDownload() {
+      this.download(
+        "/pu/match/downloadFailData",
+        {},
+        `采购员上级采购经理匹配模板${new Date().getTime()}.xlsx`
+      );
+    },
+    // 选 择
+    useSelect(prop) {
+      this.selectData = prop;
+    },
+  },
+  created() {
+    this.useQuery(this.params, this.page);
+  },
+};
+</script>
+
+<template>
+  <el-card
+    v-loading="loading"
+    :body-style="{
+      height: '100%',
+      padding: 0,
+      display: 'flex',
+      'flex-direction': 'column',
+    }"
+  >
+    <el-super-search
+      v-model="params"
+      :size="size"
+      :dict="dict"
+      :columns="SearchColumns"
+      @reset="useReset"
+      @submit="useQuery(params, page)"
+    ></el-super-search>
+
+    <el-row
+      :gutter="10"
+      class="mb10"
+      type="flex"
+      justify="end"
+      style="margin-top: 20px"
+    >
+      <el-button
+        type="primary"
+        :size="size"
+        v-hasPermi="['pu:match:add']"
+        @click="useAdd"
+        >新增</el-button
+      >
+      <BatchImport
+        ref="batchImport"
+        v-hasPermi="['pu:match:export']"
+        @import="handelImport"
+        @temDownload="handleTemDownload"
+      ></BatchImport>
+
+      <ty-qy-button
+        :size="size"
+        :select-data="selectData"
+        @refresh="useQuery(params, page)"
+      ></ty-qy-button>
+
+      <plsc-button
+        :size="size"
+        :select-data="selectData"
+        @refresh="useQuery(params, page)"
+      ></plsc-button>
+
+      <dc-button
+        :size="size"
+        :select-sata="selectData"
+        :params="params"
+      ></dc-button>
+    </el-row>
+
+    <match-details
+      :size="size"
+      :dict="dict"
+      :data="selectData"
+      :add-type="addType"
+      ref="matcDetails"
+      @refresh="useQuery(params, page)"
+    ></match-details>
+
+    <el-super-ux-table
+      v-model="tableData"
+      :dict="dict"
+      :size="size"
+      :page="page"
+      :columns="TableColumns"
+      index
+      checkbox
+      pagination
+      convenitentOperation
+      storage-key="PuMatchSuperTable"
+      @row-dblclick="useSee"
+      @row-select="useSelect"
+      @pagination="useQuery(params, page)"
+    >
+      <ux-table-column fixed="right" title="操作" width="180" align="center">
+        <template slot-scope="scope">
+          <el-button type="text" :size="size" @click.stop="useSee(scope.row)"
+            >查看</el-button
+          >
+          <el-button
+            type="text"
+            :size="size"
+            v-hasPermi="['pu:match:edit']"
+            @click.stop="useEdit(scope.row)"
+            >编辑</el-button
+          >
+        </template>
+      </ux-table-column>
+    </el-super-ux-table>
+  </el-card>
+</template>
+
+<style scoped lang="scss">
+.el-card {
+  width: calc(100% - 32px);
+  height: calc(100vh - 32px);
+  margin: 16px;
+  padding: 16px;
+  border-radius: 8px;
+}
+
+.el-button-group {
+  margin: 0 10px;
+}
+</style>