elizebeth/src/xt_pages/supply/supplyQuery.vue

<template>
  <div class="main-contain">
    <div class="position">
      <bread-crumb :crumbs="crumbs"></bread-crumb>
    </div>
    <div class="app-container">
      <div
        style="
          justify-content: space-between;
          margin: 0px 0 12px 0;
          display: flex;
          align-items: center;
        "
      >
        <div>
          <el-select
            v-model="type_name"
            style="width: 170px; margin-right: 10px"
            clearable
            placeholder="请选择供应商类别"
            @change="changeTypeName"
          >
            <el-option
              v-for="item in sType"
              :key="item.id"
              :label="item.name"
              :value="item.value"
            >
            </el-option>
          </el-select>

          <el-input
            size="small"
            style="width: 200px; margin-left: 10px"
            class="filter-item"
            v-model.trim="keywords"
            placeholder="按供应商编号，供应商名称，联系人搜索"
          />

          <el-button
            size="small"
            class="filter-item"
            type="primary"
            icon="el-icon-search"
            @click="search"
            >查询</el-button
          >
        </div>
        <div>
          <el-button size="small" type="primary" @click="toAdd(1)"
            >新增</el-button
          >
          <addSupply ref="addSupply" @init="initData"></addSupply>
        </div>
      </div>

      <el-table
        :row-style="{ color: '#303133' }"
        :header-cell-style="{
          backgroundColor: 'rgb(245, 247, 250)',
          color: '#606266',
        }"
        :data="tableList"
        :class="signAndWeighBoxPatients"
        border
      >
        <el-table-column prop="SupplierType" label="供应商类别" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.TypeName }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="SupplierCode" label="供应商编码" align="center">
          <template slot-scope="scope">
            {{ scope.row.SupplierCode }}
          </template>
        </el-table-column>
        <el-table-column prop="SupplierName" label="供应商名称" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.SupplierName }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="ConName" label="首要联系人" align="center">
          <template slot-scope="scope">
            {{ scope.row.ConName }}
          </template>
        </el-table-column>
        <el-table-column prop="VatRate" label="增值税税率(%)" align="center">
          <template slot-scope="scope">
            {{ scope.row.VatRate }}
          </template>
        </el-table-column>
        <el-table-column prop="BankAccount" label="银行账号" align="center">
          <template slot-scope="scope">
            {{ scope.row.BankAccount }}
          </template>
        </el-table-column>
        <el-table-column prop="Bank" label="开户银行" align="center">
          <template slot-scope="scope">
            {{ scope.row.Bank }}
          </template>
        </el-table-column>

        <el-table-column prop="Number" label="纳税人识别号" align="center">
          <template slot-scope="scope">
            {{ scope.row.Number }}
          </template>
        </el-table-column>

        <el-table-column prop="Phone" label="手机" align="center">
          <template slot-scope="scope">
            {{ scope.row.Phone }}
          </template>
        </el-table-column>

        <el-table-column label="操作" align="center" width="200px">
          <template slot-scope="scope">
            <el-button
              icon="el-icon-edit-outline"
              size="small"
              type="primary"
              @click="toClick(scope.row, 2)"
              >编辑
            </el-button>
            <el-button
              icon="el-icon-delete"
              size="small"
              type="danger"
              @click="toDelete(scope.row, scope.$index)"
              >删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[10, 50, 100, 200, 500, 1000]"
        :page-size="10"
        background
        align="right"
        style="margin-top: 20px"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import BreadCrumb from "@/xt_pages/components/bread-crumb";
import addSupply from "./components/addSupply.vue";
import { getexporthistory, delsupplys, getsupplytype } from "@/api/supply";
export default {
  name: "stockIn",
  created() {
    this.getsupplytype();
    // this.initSupplierData()
    this.org_id = this.$store.getters.xt_user.org_id;

    var start_time = window.sessionStorage.getItem("start_time");
    var end_time = window.sessionStorage.getItem("end_time");

    if (start_time != null) {
      this.start_time = start_time;
    }
    if (end_time != null) {
      this.end_time = end_time;
    }
    window.sessionStorage.removeItem("start_time");
    window.sessionStorage.removeItem("end_time");
    this.initData();
  },
  components: {
    BreadCrumb,
    addSupply,
  },
  data() {
    return {
      page: 1,
      limit: 10,

      type_name: "请选择",
      crumbs: [
        { path: false, name: "采购管理" },
        { path: "/supply/good/order/query", name: "供应商管理" },
      ],
      keywords: "",
      total: 0,
      multipleSelection: [],
      signAndWeighBoxPatients: "sign-and-weigh-box-patients",
      start_time: "",
      end_time: "",
      page: 1,
      limit: 10,
      goodType: [],
      goodInfo: [],
      org_id: 0,
      types: [],
      tableList: [],
      tyep_name: "",
      sType: [],
    };
  },

  methods: {
    initData() {
      let params = {
        limit: this.limit,
        page: this.page,
        ctype: this.type_name,
        keyword:this.keywords,
      };
      getexporthistory(params).then((res) => {
        if (res.data.state == 1) {

          this.tableList = res.data.data.list;
          this.total = res.data.data.total;
        }
      });
    },

    getsupplytype() {
      getsupplytype().then((res) => {
        if (res.data.state == 1) {
          this.sType = res.data.data.list;
        }

      });
    },

    toDelete(val, index) {
      this.$confirm('确认删除吗？','删除',{
        confirmButtonText: '确 定',
        concelmButtonText: '取 消',
        type: 'warning'
      }).then(() => {
      delsupplys(val.ID)
        .then((res) => {
          if (res.data.code == 0) {
            this.$message.success(res.data.data.list);
          }
        })
        .then(() => {
          this.initData();
        })
        .catch((err) => {
          console.log(err);
        });
      }).catch(() => {})
    },

    toAdd(val) {
      this.$refs.addSupply.show(1, val);
    },
    toClick(data, val) {
      this.$refs.addSupply.show(data, val);
    },
    changeTypeName() {
      this.initData();
    },
    startTimeChange() {},
    endTimeChange() {},
    search() {
      this.initData();
    },
    handleSizeChange(val) {
      this.limit = val;
      this.initData();
    },
    handleCurrentChange(val) {
      this.page = val;
      this.initData();
    },
  },
};
</script>

<style rel="stylesheet/css" lang="scss" scoped>
.information {
  border: 1px #dcdfe6 solid;
  padding: 30px 20px 30px 20px;

  .border {
    border-bottom: 1px #dcdfe6 solid;
    margin: 0px 0 20px 0;
  }
}

.title {
  background: #409eff;
  height: 44px;
  line-height: 44px;
  padding: 0 0 0 10px;
  color: #fff;
  margin: 0 0 10px 0;
}

.edit_separater {
  border-top: 1px solid rgb(233, 233, 233);
  margin-top: 15px;
  margin-bottom: 15px;
}
</style>

<style>
.sign-and-weigh-box .sign-and-weigh-box-patients .cell {
  font-size: 12px;
}

.sign-and-weigh-box .sign-and-weigh-box-patients .current-row > td {
  background: #6fb5fa;
}

.count {
  color: #bd2c00;
}
.el-table td,
.el-table th.is-leaf,
.el-table--border,
.el-table--group {
  border-color: #d0d3da;
}
.el-table--border::after,
.el-table--group::after,
.el-table::before {
  background-color: #d0d3da;
}
</style>