web/src/views/inventory/supplier.vue

<template>
  <div class="container-wrapper">
    <div class="top">
      <div class="search">
        <div class="left">
          <el-form :inline="true" :model="searchModel">
            <el-form-item>
              <el-input v-model="searchModel.keyword" placeholder="名称/联系人/联系方式" style="width: 250px;height: 42px"
                        :prefix-icon="Search"></el-input>
            </el-form-item>
            <el-form-item>
              <el-select v-model="searchModel.turn" placeholder="启用状态" style="width: 120px;height: 42px" clearable>
                <el-option label="启用中" :value="1"></el-option>
                <el-option label="已禁用" :value="0"></el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </div>
        <div class="right">
          <div class="default-btn" @click="resetSearch">
            <span class="iconfont icon-RectangleCopy1"></span>
            重置
          </div>
          <div class="default-btn" @click="getSupplier" style="margin-left: 24px">
            <span class="iconfont icon-RectangleCopy"></span>
            搜索
          </div>
        </div>
      </div>
      <div class="addBtn">
        <span class="default-btn" @click="addSupplier(null)">添加供应商</span>
      </div>
    </div>
    <div class="content">
      <el-table :data="tableData" style="width: 100%;height: 100%" @row-click="editSupplier" :header-cell-style="{ backgroundColor: '#F1F5FB' }">
        <el-table-column label="供应商名称" prop="name" show-overflow-tooltip>
        </el-table-column>
        <el-table-column label="启用状态" prop="turn" width="150" show-overflow-tooltip>
          <template #default="scope">
            <el-tag type="success" v-if="scope.row.turn ==1">启用中</el-tag>
            <el-tag type="info" v-else>已禁用</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="许可证号" prop="licenseCode" show-overflow-tooltip></el-table-column>
        <el-table-column label="联系人" prop="contactName" width="100" show-overflow-tooltip></el-table-column>
        <el-table-column label="联系方式" prop="contactTel" width="150" show-overflow-tooltip></el-table-column>
        <el-table-column label="备注" prop="remark" show-overflow-tooltip/>
      </el-table>
    </div>
    <div class="bottom">
      <div class="page_btn_list">
        <el-pagination
            background
            layout="prev, pager, next"
            :page-size="pageSize"
            :current-page="page"
            :total="total"
            @current-change="changePage"
        />
      </div>
    </div>
    <AddSupplier ref="addSupplierRef" @close="getSupplier()"></AddSupplier>
  </div>
</template>
<script setup lang="ts">
import {nextTick, onMounted, ref, watch} from "vue";
import {post} from "@/utils/request.ts";
import AddSupplier from "@/components/inventory/supplier/AddSupplier.vue";
import {Search} from "@element-plus/icons-vue";

const tableData = ref<any>([])
const getSupplier = () => {
  const query = {
    page: page.value,
    pageSize: 20,
    ...searchModel.value,
  }
  post("inventory/supplier/list", {query: query}, null).then(
      (res: any) => {
        tableData.value = res.list
        total.value = res.total_count
      }
  )
}
const addSupplierRef = ref();

const editSupplier = (row: any) => {
  nextTick(() => {
    addSupplierRef.value.editInit(row)
  })
}
const addSupplier = (row: any) => {
  nextTick(() => {
    addSupplierRef.value.addInit()
  })
}
onMounted(() => {
  getSupplier()
})
//分页
let pageSize = ref(20)
let total = ref(0)
let page = ref(1)
let changePage = (value: number) => {
  page.value = value
  getSupplier()
}
const searchModel = ref({
  keyword: null,
  turn: null,
})
const resetSearch = () => {
  searchModel.value = {
    keyword: null,
    turn: null,
  }
  getSupplier()
}
</script>

<style scoped lang="scss">
@use "@/assets/scss/base.scss";
.container-wrapper {
  box-sizing: border-box;
  padding: 24px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
  .content {
    width: 100%;
    flex: 1;
    margin-top: base.$margin-base;
  }
  .bottom {
    width: 100%;
    height: 60px;
    background-color: #FFF;
    box-sizing: border-box;
    padding: 10px;
    position: relative;
    border-top: 1px solid #EEE;
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }
}

.top {
  height: 110px;
  background: #fff;
  display: flex;
  flex-direction: column;

  .search {
    display: flex;
    justify-content: space-between;
    .left {
      flex: 1;
      display: flex;
      justify-content: space-between;
      margin-right: 24px;
      .el-form-item {
        margin-right: 5px;
      }
    }
    .right {
      display: flex;
      .btn {
        width: 120px;
        height: 42px;
        background: #FFFFFF;
        border-radius: 6px;
        border: 1px solid #979797;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-left: 24px;
        cursor: pointer;
        &:hover {
          background: #4D6DE4;
          color: #fff;
          border: none;
        }
      }
    }

  }

  .addBtn {
    span {
      display: inline-block;
    }
  }
}
:deep(.el-range-editor.el-input__wrapper) {
  height: 42px;
}
:deep(.el-select__wrapper) {
  height: 42px;
}
</style>