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

<!-- 采购员上级采购经理匹配 -->
<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>