drp-ui/src/views/innerData/supplierIndex.vue

<template>
  <div id="supplierIndex">
    <div v-if="isList">
      <el-card v-loading="loading" style="position: relative;">
      <p>内部供应商档案列表</p>
      <div class="btn_grooup">
        <el-button type="primary" size="mini" @click="addDivision">新增</el-button>
        <el-button type="primary" size="mini" @click="delItems">删除</el-button>
      </div>

      <el-super-ux-table
          id="data-table"
          v-model="tableData"
          index
          checkbox
          :size="size"
          :dict="dict"
          :page="pageInfo"
          :height=500
          :columns="TableColumns"
          pagination
          convenitentOperation
          storage-key="supplierTable"
          @row-dblclick="useSee"
          @row-select="useSelect"
          @selection-change="handleSelectionChange"
          @row-click="rowSelect"
          @pagination="useQuery(params, pageInfo)"
          ref="tables"
        >
          <ux-table-column
            fixed="right"
            title="操作"
            align="center"
            width="100"
            >
            <template slot-scope="scope">
              <!-- <el-button type="text" size="mini" v-if="scope.row.status == '1' && scope.row.flowId" @click="reback(scope.row)">收回</el-button> -->
              <el-button type="text" size="mini" @click="check(scope.row)">查看</el-button>
              <el-button type="text" size="mini" @click="delItem(scope.row)">删除</el-button>
            </template>
          </ux-table-column>
      </el-super-ux-table>
      
      </el-card>
    </div>

    <Add v-model="isList" v-if="!isList" :pageStu="page" :disable="disable" :row="rowDetail" @refresh="searchList"/>
  </div>
</template>

<script>
export default {
  dicts: [],
  components: {
    Add: () => import("./addSupplier.vue"),
    ElSuperUxTable: () => import("@/components/super-ux-table/index.vue"),
  },
  data () {
    return {
      // 页面配置
      isList: true,
      // 页面状态
      page: '',
      disable: false,
      rowDetail: {},
      size: "mini",
      loading: false,
      pageInfo: {
        pageNum: 1,
        pageSize: 20,
        total: 0
      },
      tableData: [],
      selectData: [],
      // SearchColumns: SearchColumns,
      TableColumns: [
        { item: { key: "supplierName", title: "供应商" }, attr: {} },
        { item: { key: "registrationName", title: "xxx" }, attr: {} },
        { item: { key: "remark", title: "备注"}, attr: {} },
      ].map(({ item, attr }) => ({
      attr,
      item: {
        ...item,
        sortabled: true,
        fixedabled: true,
        filterabled: true,
        hiddenabled: true,
      },
      })),
      ids: []
    }
  },
  methods: {
    // 新增
    addDivision() {
      this.isList = false
      this.page = 'add'
      this.disable = false
    },
    delItems() {},
    searchList() {
      // this.useQuery(this.params, this.pageInfo)
    },
    useSee() {},
    useSelect() {},
    handleSelectionChange(selection) {
      console.log('选中', selection)
      this.ids = selection.map(item => item.id)
      console.log('选中数组', this.ids)
    },
    rowSelect(row) {
      this.$refs.tables.toggleRowSelection([{row: row}]);
    },
    // 加载列表
    async useQuery(prop, page) {
      let params = {...prop, ...page}
      // await getEquipmentDataList(params).then(res => {
      //   if( res.code === 200 ) {
      //     this.tableData = res.rows
      //     this.pageInfo.total = res.total
      //   }
      // })
    },
  }
}
</script>

<style lang="scss" scoped>
#supplierIndex {
  padding: 12px;
  box-sizing: border-box;
  overflow-y: scroll;
}
.btn_grooup {
  margin-bottom: 10px;
  display: flex;
  justify-content: flex-end;
}
</style>