kd-aiot-frontend/src/views/rulesManagement/barCodeManagement/index.vue

<template>
  <div class="ele-body">
    <el-card shadow="never" v-loading="loading">
      <div class="zw-page-table">
        <!-- 条件区 -->
        <el-form class="zw-criterion">
          <div class="zw-criterion-normal">
            <el-row>
              <el-col :span="6">
                <el-form-item label-width="90px" label="条码类型：">
                  <DictSelection
                    dictName="条码分类"
                    v-model="searchForm.stripCode"
                  ></DictSelection>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label-width="70px" label="状态：">
                  <!-- <el-input size="small"
                          v-model="searchForm.status"></el-input> -->
                  <el-select
                    size="mini"
                    style="width: 90%"
                    class="form-inpit"
                    v-model="searchForm.status"
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="item in statusList"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>

              <el-col :span="4">
                <div class="zw-table-header">
                  <el-button
                    @click="search"
                    type="primary"
                    icon="el-icon-search"
                    size="mini"
                    >搜索</el-button
                  >
                  <el-button
                    icon="el-icon-refresh-left"
                    size="mini"
                    @click="reset"
                    >重置</el-button
                  >
                </div>
              </el-col>
            </el-row>
          </div>
        </el-form>
      </div>
      <el-container>
        <el-main class="zw-data-table table-list">
          <!-- 表格列表 -->
          <div class="data-tab">
            <!-- 按钮操作区 -->
            <div class="table-add">
              <el-button
                icon="el-icon-plus"
                size="mini"
                type="primary"
                @click="jumpAdd"
                >新增</el-button
              >
              <el-button size="mini" type="primary" @click="handleExport"
                >导出</el-button
              >
            </div>
            <el-table
              ref="multipleTable"
              :data="tableData"
              tooltip-effect="dark"
              style="width: 100%"
              stripe
              :header-cell-style="{ background: '#EEEEEE', border: 'none' }"
            >
              <el-table-column prop="dictBarName" label="条码类型" />

              <!-- <el-table-column prop="equName" label="绑定的设备分类" /> -->
              <el-table-column prop="status" label="状态">
                <template slot-scope="scope">
                  {{ scope.row.status ? '生效' : '失效' }}
                </template>
              </el-table-column>
              <el-table-column prop="createUserName" label="创建人" />
              <el-table-column prop="createTime" label="创建时间" />

              <el-table-column width="150px" label="操作">
                <template slot-scope="scope">
                  <div style="display: flex">
                    <!-- <el-button @click="goEdit(scope.row)" type="text" size="mini"
                  >编辑</el-button
                > -->
                    <el-button
                      v-if="scope.row.dictBarName == '包装条码'"
                      @click="print(scope.row)"
                      type="text"
                      size="mini"
                      >打印</el-button
                    >
                    <el-button
                      @click="goDetails(scope.row)"
                      type="text"
                      size="mini"
                      >详情</el-button
                    >
                    <el-button
                      @click="handleDelete(scope.row.id)"
                      type="text"
                      size="mini"
                      >删除</el-button
                    >
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div class="zw-table-footer">
            <div class="zw-table-desc gray">
              <span class="zw-table-countinfo-link" type="info"></span>
            </div>
            <div class="zw-table-pagebar">
              <el-pagination
                background
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
                :page-sizes="pageSizes"
                :page-size="size"
                :current-page.sync="page"
                @current-change="handleCurrentChange"
                @size-change="handleSizeChange"
              >
              </el-pagination>
            </div>
          </div>
        </el-main>
      </el-container>
    </el-card>
  </div>
</template>
<script>
  import barCode from '@/api/barCodeManagement';
  import selectTree from '@/components/selectTree';
  export default {
    components: { selectTree },
    data() {
      return {
        loading: false,
        size: 10,
        page: 1,
        total: 0,
        pageSizes: [5, 10, 15, 20, 25],
        form: {},
        searchForm: {},
        // dialogVisible: false,
        tableData: [],
        statusList: [
          { id: 1, name: '生效' },
          { id: 0, name: '失效' }
        ] //状态
        // treeList: [],
      };
    },
    created() {
      this.handleList();
      // this.getTreeList();
    },
    methods: {
      async handleSizeChange(pageSize) {
        this.size = pageSize;
        this.page = 1;
        await this.handleList();
      },
      async handleCurrentChange(currentPage) {
        this.page = currentPage;
        await this.handleList();
      },
      // 树形结构数据
      // getTreeList() {
      //   config.tree().then(res => {
      //     this.treeList = res.data;
      //   });
      // },
      //   获取列表信息
      async handleList(...arg) {
        let params = { page: this.page, size: this.size };
        if (arg.length > 0) {
          params = Object.assign(params, arg[0]);
        }
        let res = await barCode.getPageList(params);
        this.tableData = res.data.list;
        this.total = res.data.count;
      },
      // 搜索
      search() {
        this.page = 1;
        this.handleList(this.searchForm);
      },
      //重置
      reset() {
        this.searchForm = {};
        this.$refs.tree.valueId = null;
        this.$refs.tree.valueTitle = '';
        this.handleList(this.searchForm);
      },
      //设备分类
      // asstClick(data) {
      //   if (data == null) {
      //     this.searchForm.equCode = "";
      //   } else {
      //     this.searchForm.equCode = data.code;
      //   }
      // },
      //新增
      jumpAdd() {
        this.$router.push({ path: `/rulesManagement/barCodeManagement/add` });
        // const { href } = this.$router.resolve({
        //   path: `/barCodeManagement/add`
        // });
        // window.open(href, '_self');
      },
      //
      // submit() {
      //   let form = deepClone(this.form);
      //   let res = dict.save(form);
      //   if (res.success) {
      //     this.$message.success("操作成功！");
      //     this.handleList();
      //     this.dialogVisible = false;
      //   }
      // },

      //跳转编辑页
      goEdit() {},
      print(info) {
        this.$router.push({
          path: '/rulesManagement/barCodeManagement/print',
          query: {
            id: info.id
          }
        });
      },
      //跳转详情
      goDetails(info) {
        this.$router.push({
          path: '/rulesManagement/barCodeManagement/details',
          query: {
            id: info.id
          }
        });
      },
      //删除条码
      handleDelete(id) {
        this.$confirm('确定删除当前条码？', '提示').then(async () => {
          const res = await barCode.deleteApi(id);
          if (res.code == 0) {
            this.$message.success('删除成功！');
            this.handleList(this.searchForm);
          }
        });
      },
      /** 导出按钮操作 */
      handleExport() {
        this.download(
          '/bar/manage/export',
          {
            ...this.searchForm,
            page: this.page,
            size: this.size
          },
          `条码管理_${new Date().getTime()}.xlsx`
        );
      }
    }
  };
</script>

<style lang="scss">
  .zw-table-header {
    float: left !important;
    transform: translateY(3px);
  }
  .table-list {
    padding: 0px !important;
  }
  .form-inpit {
    width: 100%;
  }
  .zw-table-footer {
    margin-top: 10px;
  }
  .table-add {
    margin: 10px 0;
  }
</style>