jsm-mall-front/src/views/auxiliaryFittings/auxiliaryDataManagement/auxiliaryChargeManagement/selectGoods.vue

<template>
  <el-dialog
    width="980px"
    title="商品列表"
    :visible.sync="innerVisible"
    append-to-body
    :close-on-click-modal="false"
    @close="$emit('close')"
  >
    <div class="screen-container">
      <el-form ref="tableScreenForm" :model="tableScreenForm" label-width="70px" size="small" label-position="left">
        <el-row :gutter="20">
          <el-col :xs="24" :sm="8" :lg="8">
            <el-form-item label="商品编号" prop="goodsId">
              <el-input v-model="tableScreenForm.goodsId" placeholder="商品编号" size="small" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="8" :lg="8">
            <el-form-item label="辅材名称" prop="goodsName">
              <el-input v-model="tableScreenForm.goodsName" placeholder="辅材名称" size="small" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="8" :lg="8">
            <el-form-item label="辅材小类" prop="categoryId">
              <el-cascader
                v-model="tableScreenForm.categoryId"
                placeholder="辅材小类"
                size="small"
                :show-all-levels="false"
                clearable
                :options="materialCategoryTree"
                :props="{
                  options: materialCategoryTree,
                  value: 'categoryId',
                  label: 'categoryName',
                  children: 'child',
                  emitPath: false
                }"
              >
              </el-cascader>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="8" :lg="8">
            <el-form-item label="商品代码" prop="goodsCode">
              <el-input v-model="tableScreenForm.goodsCode" placeholder="商品代码" size="small" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="8" :lg="8">
            <el-form-item label="规格型号" prop="goodsSpecification">
              <el-input v-model="tableScreenForm.goodsSpecification" placeholder="规格型号" size="small" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="8" :lg="8" class="tr">
            <el-form-item label="">
              <el-button size="small" @click="chongzhi">重置</el-button>
              <el-button size="small" type="primary" @click="getGoodsListByScreen">搜索</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <el-table
      ref="goodsTable"
      :data="goodsList"
      :row-key="getRowKeys"
      height="350"
      size="mini"
      border
      header-cell-class-name="headerRowColor"
      style="width: 100%"
      @selection-change="handleChooseGoods"
    >
      <el-table-column type="selection" width="55" :reserve-selection="true" :selectable="selectable" />
      <el-table-column prop="parentCategoryName" label="大类类名称" />
      <el-table-column prop="categoryName" label="小类名称" />
      <el-table-column prop="goodsName" label="辅材名称" />
      <el-table-column prop="goodsId" label="商品编码" />
      <el-table-column prop="goodsCode" label="商品代码" />
      <el-table-column prop="goodsStockUnit" label="单位" />
      <el-table-column prop="goodsSpecification" label="规格型号" />
      <el-table-column prop="remark" label="备注" />
    </el-table>
    <div class="pagination clearfix" style="margin-top: 20px">
      <div class="fr">
        <el-pagination
          :current-page="table_currentPage"
          :page-size="table_pageSize"
          background
          layout="prev, pager, next"
          :total="table_listTotal"
          @current-change="handleTableCurrentChange"
        />
      </div>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="selGoods">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { materialCategoryTree } from '@/api/auxiliaryMaterialClass'
import { newGetList } from '@/api/masterAuxiliaryMaterials'
export default {
  props: {
    guolvList: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      innerVisible: true,
      tableScreenForm: {
        goodsId: '',
        goodsName: '',
        goodsCode: '',
        categoryId: '',
        goodsSpecification: ''
      },
      goodsList: [],
      table_currentPage: 1,
      table_pageSize: 10,
      table_listTotal: 0,
      table_chooseGoods: [],
      materialCategoryTree: []
    }
  },
  created() {
    // 获取小类筛选
    materialCategoryTree({ state: 'ON' }).then(res2 => {
      this.materialCategoryTree = res2.data.filter(item => item.child && item.child.length > 0)
    })
    // 获取列表数据
    this.getGoodsList()
  },
  methods: {
    selectable(row, index) {
      return !~this.guolvList.indexOf(row.goodsId)
    },
    // 获取商品列表
    getGoodsList() {
      newGetList({
        pageNum: this.table_currentPage,
        pageSize: this.table_pageSize,
        params: [
          ...(() => {
            if (this.tableScreenForm.goodsId) {
              return [{ param: 'a.goods_id', compare: 'like', value: this.tableScreenForm.goodsId }]
            } else {
              return []
            }
          })(),
          ...(() => {
            if (this.tableScreenForm.goodsName) {
              return [{ param: 'a.goods_name', compare: 'like', value: this.tableScreenForm.goodsName }]
            } else {
              return []
            }
          })(),
          ...(() => {
            if (this.tableScreenForm.goodsCode) {
              return [{ param: 'a.goods_code', compare: 'like', value: this.tableScreenForm.goodsCode }]
            } else {
              return []
            }
          })(),
          ...(() => {
            if (this.tableScreenForm.goodsSpecification) {
              return [
                { param: 'a.goods_specification', compare: 'like', value: this.tableScreenForm.goodsSpecification }
              ]
            } else {
              return []
            }
          })(),
          ...(() => {
            if (this.tableScreenForm.categoryId) {
              return [{ param: 'b.category_id', compare: '=', value: this.tableScreenForm.categoryId }]
            } else {
              return []
            }
          })()
        ]
      }).then(res => {
        this.goodsList = res.data.records
        console.log(res.data.records)
        this.table_listTotal = res.data.total
      })
    },
    chongzhi() {
      this.tableScreenForm = {
        goodsId: '',
        goodsName: '',
        goodsCode: '',
        categoryId: '',
        goodsSpecification: ''
      }
      this.getGoodsListByScreen()
    },
    // 搜索
    getGoodsListByScreen() {
      this.handleTableCurrentChange(1)
    },
    // 更改列表当前页
    handleTableCurrentChange(val) {
      if (this.table_chooseGoods.length > 0) {
        return this.$errorMsg('当前已选择商品')
      }
      this.table_currentPage = val
      this.getGoodsList()
    },
    // id
    getRowKeys(row) {
      return row.goodsId
    },
    // table点击选择商品
    handleChooseGoods(val) {
      this.table_chooseGoods = val
    },
    selGoods() {
      console.log(this.table_chooseGoods)
      this.$emit('confirm', this.table_chooseGoods)
    }
  }
}
</script>

<style lang="scss" scoped></style>