drp-ui/src/views/common-dialog/supplier.vue

<script>
import { initParams } from "./utils/init-something";
import { list } from "./api/index";

export default {
  name: "SupplierInputDialog",
  props: ["title", "value"],
  components: {},
  data() {
    const columns = [
      {
        key: "code",
        title: "供应商编码",
        type: "Input",
        search: true,
      },
      {
        key: "name",
        title: "供应商名称",
        type: "Input",
        search: true,
      },
    ];
    const initTableColumns = () => columns.filter((column) => column.key);
    const initSearchColumns = () => columns.filter((column) => column.search);
    return {
      // global
      size: "mini",
      width: "50%",
      page: { pageNum: 1, pageSize: 25, total: 0 },
      pageSizes: [25, 50],
      layout: "prev, pager, next, jumper",
      api: "puSupplier",
      showKey: "name",
      // dialog
      visible: false,
      loading: false,
      // search
      searchColumns: initSearchColumns(),
      params: initParams(initSearchColumns()),
      // table
      tableColumns: initTableColumns(),
      data: [],
      currentData: null,
    };
  },
  computed: {},
  watch: {},
  methods: {
    // set dialog visible
    setVisible(prop) {
      this.visible = prop;
    },
    // do something before dialog open
    beforeOpen() {
      const { value } = this.$props;
      this.params[this.showKey] = value;
      this.fetchList(this.params, this.page);
    },
    // fetch table data
    async fetchList(prop, page) {
      try {
        this.loading = true;
        const { pageNum, pageSize } = page;
        const { code, msg, rows, total } = await list(this.api, {
          ...prop,
          pageNum,
          pageSize,
        });
        if (code === 200) {
          this.data = rows;
          this.page.total = total;
          this.$notify.success({ title: msg });
        } else {
          this.$notify.warning({ title: msg });
        }
      } catch (err) {
        this.$notify.error({ title: "error", message: err });
      } finally {
        this.loading = false;
        this.setCurrentData(
          this.data.find(
            (column) => column[this.showKey] === this.currentData[this.showKey]
          )
        );
      }
    },
    // setting up to fetch table data
    queryList() {
      this.fetchList(this.params, this.page);
    },
    // reset to fetch table data
    resetList() {
      this.page.pageNum = 1;
      this.params = initParams(this.searchColumns);
      this.fetchList(this.params, this.page);
    },
    // size change to fetch table data
    pageSizeChange(prop) {
      this.page.pageSize = prop;
      this.fetchList(this.params, this.page);
    },
    // number change to fetch table data
    pageNumberChange(prop) {
      this.page.pageNum = prop;
      this.fetchList(this.params, this.page);
    },
    // select row data
    selectCurrentData(row) {
      this.currentData = row;
    },
    // set row data highlight
    setCurrentData(row) {
      this.$refs.singleTable.setCurrentRow(row);
    },
    //
    confirm() {
      if (this.currentData) {
        this.$emit("confirm", this.currentData);
      }
      this.setVisible(false);
    },
  },
  created() {},
  mounted() {},
  destroyed() {},
};
</script>
<template>
  <el-dialog
    :title="title"
    :visible.sync="visible"
    :width="width"
    append-to-body
    @open="beforeOpen"
  >
    <el-form :size="size" :inline="true" :model="params">
      <el-form-item
        v-for="(column, index) in searchColumns"
        :key="index"
        :label="column.title"
      >
        <el-input v-model="params[column.key]" @change="queryList"> </el-input>
      </el-form-item>
      <el-form-item>
        <el-button icon="el-icon-refresh" @click="resetList"></el-button>
      </el-form-item>
    </el-form>
    <el-table
      v-loading="loading"
      :data="data"
      :size="size"
      ref="singleTable"
      height="45vh"
      highlight-current-row
      style="width: 100%; margin-bottom: 20px"
      @row-click="selectCurrentData"
    >
      <el-table-column
        v-for="(column, index) in tableColumns"
        :key="index"
        :prop="column.key"
        :label="column.title"
        :width="column.width"
        show-overflow-tooltip
      >
      </el-table-column>
    </el-table>
    <div
      style="display: flex; justify-content: space-between; align-items: center"
    >
      <p>
        <span style="font-size: 12px">已选择 ：</span>
        <el-tag v-if="currentData" :size="size">{{
          currentData[showKey]
        }}</el-tag>
        <span v-else>无</span>
      </p>
      <el-pagination
        :layout="layout"
        :total="page.total"
        :page-sizes="pageSizes"
        :page-size="page.pageSize"
        :current-page="page.pageNum"
        :small="size === 'mini'"
        background
        @size-change="pageSizeChange"
        @current-change="pageNumberChange"
      >
      </el-pagination>
    </div>
    <div style="margin-top: 20px; text-align: right">
      <el-button :size="size" @click="visible = false">取 消</el-button>
      <el-button :size="size" type="primary" @click="confirm">确 定</el-button>
    </div>
  </el-dialog>
</template>
<style scoped></style>