supply-front/src/views/basic_data/dealer/dealer_stock.vue

<template>
  <div class="app-container">
    <!-- 筛选条件 -->
    <div class="base">
      <el-form label-width="100px" size="small" label-position="left">
        <el-row :gutter="20">
          <el-col :xs="24" :sm="12" :lg="6">
            <el-form-item label="经销商名称" prop="account">
              <el-input placeholder="请输入经销商名称"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :lg="6">
            <el-form-item label="存货分类编码" prop="account">
              <el-input placeholder="请输入"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :lg="6">
            <el-form-item label="存货分类" prop="account">
              <el-input placeholder="请输入"></el-input>
            </el-form-item>
          </el-col>

          <el-col :xs="24" :sm="12" :lg="6">
            <el-form-item label="" class="fr">
              <el-button size="small">清空</el-button>
              <el-button size="small" type="primary">搜索</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>

    <div class="btn-group clearfix">
      <div class="fl">
        <el-button type="primary">新增</el-button>
        <el-button type="primary">编辑</el-button>
        <el-button type="primary">删除</el-button>
      </div>
      <div class="fr">
        <el-button type="primary">导入</el-button>
        <el-button type="primary">导出</el-button>
        <el-button type="primary">打印</el-button>
      </div>
    </div>

    <div class="mymain-container">
      <!-- 列表 -->
      <div class="table">
        <el-table
          v-loading="listLoading"
          :data="dataList"
          element-loading-text="Loading"
          border
          fit
          highlight-current-row
          stripe
        >
          <el-table-column type="selection" min-width="100"></el-table-column>
          <el-table-column
            align="center"
            label="经销商名称"
            prop="nname"
            min-width="160"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            align="center"
            label="存货分类编码"
            prop="bianma"
            min-width="160"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            align="center"
            label="存货分类名称"
            prop="selectname"
            min-width="160"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            align="center"
            label="创建人"
            prop="person"
            min-width="160"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            align="center"
            label="创建时间"
            prop="createdata"
            min-width="160"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            align="center"
            label="更新人"
            prop="updateperson"
            min-width="160"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            align="center"
            label="更新时间"
            prop="update"
            min-width="160"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            align="center"
            label="操作"
            prop="caozuo"
            min-width="160"
            show-overflow-tooltip
          >
            <el-button type="text" class="textColor" @click="editFn"
              >编辑</el-button
            >
            <el-button type="text" class="textColor">删除</el-button>
          </el-table-column>
        </el-table>
      </div>
      <!-- 分页 -->
      <div class="fr">
        <el-pagination
          :current-page="currentPage"
          :page-sizes="[10, 20, 30, 50]"
          :page-size="10"
          layout="total, sizes, prev, pager, next, jumper"
          :total="listTotal"
        >
        </el-pagination>
      </div>
    </div>

    <!-- 弹窗 -->
    <el-dialog
      title="编辑"
      :visible.sync="dialogForm"
      width="30%"
      :show-close="false"
      :close-on-click-modal="false"
    >
      <el-form :model="form" label-width="100px" label-position="right">
        <el-form-item label="经销商名称">
          <el-select v-model="form.name" placeholder="请选择活动区域">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="活动分类">
          <el-select v-model="form.select" placeholder="请选择活动区域">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogForm = false">取 消</el-button>
        <el-button type="primary" @click="dialogForm = false">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogForm: false,
      form: {
        name: "",
        select: "",
      },
      currentPage: 1, // 当前页码
      pageSize: 10, // 每页数量
      listTotal: 0, // 列表总数
      dealerForm: {
        name: "",
        coding: "",
        select: "",
      },
      dataList: [
        {
          nname: "佛山市禅城区梁云冷气经营部",
          bianma: "01",
          selectname: "家用空调",
          person: "LID",
          createdata: "2022-05-18 12:00",
          updateperson: "LID",
          update: "2022-05-24  12:00",
        },
        {
          nname: "佛山市禅城区梁云冷气经营部",
          bianma: "01",
          selectname: "家用空调",
          person: "LID",
          createdata: "2022-05-18 12:00",
          updateperson: "LID",
          update: "2022-05-24  12:00",
        },
        {
          nname: "佛山市禅城区梁云冷气经营部",
          bianma: "01",
          selectname: "家用空调",
          person: "LID",
          createdata: "2022-05-18 12:00",
          updateperson: "LID",
          update: "2022-05-24  12:00",
        },
        {
          nname: "佛山市禅城区梁云冷气技术部",
          bianma: "02",
          selectname: "家用电视",
          person: "CCC",
          createdata: "2022-05-18 12:00",
          updateperson: "CCC",
          update: "2022-05-24  12:00",
        },
      ], // 列表数据
      listLoading: false, // 列表加载loading
    };
  },
  created() {},
  computed: {},
  methods: {
    editFn() {
      this.dialogForm = true;
    },
    queryFn() {
      if (
        this.dealerForm.name === "" &&
        this.dealerForm.coding === "" &&
        this.dealerForm.select === ""
      ) {
        return;
      }

      let res = this.dataList.filter(
        (v) =>
          v.nname === this.dealerForm.name &&
          v.coding === this.dealerForm.bianma &&
          v.select === this.dealerForm.selectname
      );
      this.dataList = res;
    },
    resetFn() {
      this.dealerForm.name = "";
      this.dealerForm.coding = "";
      this.dealerForm.select = "";
      console.log(this.dealerForm);
    },
  },
};
</script>

<style lang="scss" scoped>
.aaa {
  padding: 10px 0;
}
::v-deep .el-input--suffix {
  width: 300px;
}
::v-deep .el-dialog__header {
  background-color: #dddddd;
}
::v-deep .dialog-footer {
  display: flex;
  justify-content: center;
}

.formWidth {
  width: 70%;
  margin-right: 20px;
}
.right {
  float: right;
}
</style>