lc_finance/web/src/view/storehouse/commodity/commodity.vue

<template>
  <el-container>
    <el-header
      class="gva-search-box"
      style="line-height: 60px"
    >
      <el-row>
        <el-col :span="8">
          <el-form
            inline
            style="margin-top: 10px"
          >
            <el-form-item label="名称">
              <el-input
                v-model="searchCommodity.name"
                placeholder="请输入名称"
              />
            </el-form-item>
            <el-form-item>
              <el-button @click="getData">搜索</el-button>
            </el-form-item>
          </el-form>

        </el-col>
        <el-col :span="8" />
        <el-col :span="8">
          <el-button
            type="primary"
            @click="isOpenCommodityAdd = true"
          >商品新增</el-button>
          <el-button
            type="primary"
            @click="isOpenCommodityGenre = true"
          >商品类型</el-button>
        </el-col>
      </el-row>
    </el-header>
    <el-main class="gva-table-box">
      <el-table
        :data="commodityListData"
        style="height: 600px"
      >
        <el-table-column
          prop="name"
          label="商品名称"
          align="center"
        />
        <el-table-column
          prop="commodityGenre.name"
          label="类型"
          align="center"
        />
        <el-table-column
          prop="supplier.name"
          label="供应商"
          align="center"
        />
        <el-table-column
          prop="unitPrice"
          label="单价"
          align="center"
        />
        <el-table-column label="操作">
          <template #default="scope">
            <el-button
              size="small"
              type="primary"
              @click="openCommodityEdit(scope.row)"
            >编辑</el-button>
            <el-button
              size="small"
              type="danger"
              @click="commodityDelete(scope.row)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--      分页-->
      <div class="gva-pagination">
        <el-pagination
          :current-page="searchCommodity.pageInfo.page"
          :page-size="searchCommodity.pageInfo.pageSize"
          :page-sizes="[10, 30, 50, 100]"
          :total="total"
          layout="total, sizes, prev, pager, next, jumper"
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
        />
      </div>
      <!--      修改-->
      <el-drawer
        v-model="isOpenCommodityEdit"
        title="修改供应商信息"
        direction="rtl"
        size="30%"
      >
        <div>
          <el-form
            v-model="commodityEditData"
            label-position="left"
            label-width="auto"
            style="max-width: 400px"
          >
            <el-form-item label="商品名称">
              <el-input v-model="commodityEditData.name" />
            </el-form-item>
            <el-form-item label="商品类型">
              <el-select
                v-model="commodityEditData.genre"
                style="width: 240px"
              >
                <el-option
                  v-for="item in commodityGenreAllData"
                  :key="item.ID"
                  :label="item.name"
                  :value="item.ID"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="供应商">
              <el-select
                v-model="commodityEditData.supplierId"
                style="width: 240px"
              >
                <el-option
                  v-for="item in supplierAllData"
                  :key="item.ID"
                  :label="item.name"
                  :value="item.ID"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="单价">
              <el-input
                v-model="commodityEditData.unitPrice"
                type="number"
              />
            </el-form-item>
            <el-form-item label="单位">
              <el-input v-model="commodityEditData.unity" />
            </el-form-item>
            <el-form-item label="备注">
              <el-input v-model="commodityEditData.remark" />
            </el-form-item>
            <el-form-item>
              <el-button
                type="primary"
                @click="commoditySubmit"
              >提交</el-button>
              <el-button @click="isOpenCommodityEdit = false">关闭</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-drawer>
      <el-drawer
        v-model="isOpenCommodityAdd"
        title="新增供应商信息"
        direction="rtl"
        size="30%"
      >
        <div>
          <el-form
            v-model="commodityAddData"
            label-position="left"
            label-width="auto"
            style="max-width: 400px"
          >
            <el-form-item label="商品名称">
              <el-input v-model="commodityAddData.name" />
            </el-form-item>
            <el-form-item label="商品类型">
              <el-select
                v-model="commodityAddData.genre"
                style="width: 240px"
              >
                <el-option
                  v-for="item in commodityGenreAllData"
                  :key="item.ID"
                  :label="item.name"
                  :value="item.ID"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="供应商">
              <el-select
                v-model="commodityAddData.supplierId"
                style="width: 240px"
              >
                <el-option
                  v-for="item in supplierAllData"
                  :key="item.ID"
                  :label="item.name"
                  :value="item.ID"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="单价">
              <el-input
                v-model.number="commodityAddData.unitPrice"
                type="number"
              />
            </el-form-item>
            <el-form-item label="单位">
              <el-input v-model="commodityAddData.unity" />
            </el-form-item>
            <el-form-item label="备注">
              <el-input v-model="commodityAddData.remark" />
            </el-form-item>
            <el-form-item>
              <el-button
                type="primary"
                @click="commodityAddSubmit"
              >提交</el-button>
              <el-button @click="isOpenCommodityAdd = false">关闭</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-drawer>
      <!--      商品类型-->
      <el-drawer
        v-model="isOpenCommodityGenre"
        title="商品类型"
        direction="rtl"
        size="50%"
      >
        <el-header>
          <el-button
            type="primary"
            @click="isOpenAddGenre = true"
          >新增商品类型</el-button>
        </el-header>
        <el-main>
          <el-table :data="filterTableData">
            <el-table-column
              label="ID"
              prop="ID"
            />
            <el-table-column
              label="名称"
              prop="name"
            />
            <el-table-column
              label="备注"
              prop="remarks"
            />
            <el-table-column align="right">
              <template #header>
                <el-input
                  v-model="searchCommodityGenre"
                  placeholder="筛选"
                />
              </template>
              <template #default="scope">
                <el-button
                  type="primary"
                  @click="openUpdateGenre(scope.row)"
                >编辑</el-button>
                <el-button
                  type="danger"
                  @click="commodityGenreDeleteSubmit(scope.row)"
                >删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-main>
        <!--        新增-->
        <el-dialog
          v-model="isOpenAddGenre"
          title="新增商品类型"
          width="300"
          align-center
        >
          <template #footer>
            <el-form>
              <el-form-item label="名称">
                <el-input
                  v-model="commodityGenreAddData.name"
                  style="width: 240px;"
                />
              </el-form-item>
              <el-form-item label="备注">
                <el-input
                  v-model="commodityGenreAddData.remarks"
                  style="width: 240px;"
                />
              </el-form-item>
              <el-form-item>
                <el-button
                  type="primary"
                  @click="commodityGenreAddSubmit"
                >提交</el-button>
              </el-form-item>
            </el-form>
          </template>
        </el-dialog>
        <!--        编辑-->
        <el-dialog
          v-model="isOpenUpdateGenre"
          title="编辑商品类型"
          width="300"
          align-center
        >
          <template #footer>
            <el-form>
              <el-form-item label="名称">
                <el-input
                  v-model="commodityGenreUpdateData.name"
                  style="width: 240px;"
                />
              </el-form-item>
              <el-form-item label="备注">
                <el-input
                  v-model="commodityGenreUpdateData.remarks"
                  style="width: 240px;"
                />
              </el-form-item>
              <el-form-item>
                <el-button
                  type="primary"
                  @click="commodityGenreUpdateSubmit"
                >提交</el-button>
              </el-form-item>
            </el-form>
          </template>
        </el-dialog>
      </el-drawer>
    </el-main>
  </el-container>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue'
import {
  createCommodity,
  createCommodityGenre, deleteCommodity,
  deleteCommodityGenre,
  queryAllCommodityGenre, queryAllSupplier, queryCommodityList, updateCommodity,
  updateCommodityGenre
} from '@/api/storehouse'
import { ElMessage, ElMessageBox } from 'element-plus'

// 数据
const commodityGenreAllData = ref()
const commodityListData = ref()

const searchCommodity = ref({
  pageInfo: {
    page: 1,
    pageSize: 10,
  },
  name: ''
})

const total = ref(0)

// 分页
const handleSizeChange = (val) => {
  searchCommodity.value.pageSize = val
  getData()
}

const handleCurrentChange = (val) => {
  searchCommodity.value.page = val
  getData()
}

const supplierAllData = ref()
const getData = async() => {
  await queryAllCommodityGenre().then(res => {
    commodityGenreAllData.value = res.data
  })
  await queryCommodityList(searchCommodity.value).then(res => {
    commodityListData.value = res.data.list
    total.value = res.data.total
  })
  await queryAllSupplier().then(res => {
    console.log(res.data)
    supplierAllData.value = res.data
  })
}

// 商品类型
const isOpenCommodityGenre = ref(false)

const searchCommodityGenre = ref()

const filterTableData = computed(() =>
  commodityGenreAllData.value.filter(
    (data) =>
      !searchCommodityGenre.value ||
            data.name.toLowerCase().includes(searchCommodityGenre.value.toLowerCase())
  )
)

const commodityGenreAddData = ref({
  name: '',
})
const isOpenAddGenre = ref(false)

const commodityGenreAddSubmit = async() => {
  if (!commodityGenreAddData.value.name) {
    ElMessage.error('名称不能为空')
    return
  }
  await createCommodityGenre(commodityGenreAddData.value).then(res => {
    if (res.code === 0) {
      ElMessage.success('新增成功')
    } else {
      ElMessage.error('新增失败')
    }
    isOpenAddGenre.value = false
    getData()
  })
}

const commodityGenreUpdateData = ref()
const isOpenUpdateGenre = ref(false)

const openUpdateGenre = (val) => {
  isOpenUpdateGenre.value = true
  commodityGenreUpdateData.value = val
}

const commodityGenreUpdateSubmit = async() => {
  if (!commodityGenreUpdateData.value.name) {
    ElMessage.error('名称不能为空')
    return
  }
  await updateCommodityGenre(commodityGenreUpdateData.value).then(res => {
    if (res.code === 0) {
      ElMessage.success('编辑成功')
    } else {
      ElMessage.error('编辑失败')
    }
    isOpenUpdateGenre.value = false
    getData()
  })
}

const commodityGenreDeleteSubmit = (val) => {
  ElMessageBox.confirm(
    '将永久删除该信息。是否继续？',
    '删除',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(async() => {
      await deleteCommodityGenre(val).then(res => {
        if (res.code === 0) {
          ElMessage.success('删除成功')
          getData()
        } else {
          ElMessage.error('删除失败')
        }
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '删除已取消',
      })
    })
}

// 商品
const isOpenCommodityEdit = ref(false)
const commodityEditData = ref()
const openCommodityEdit = (val) => {
  commodityEditData.value = val
  isOpenCommodityEdit.value = true
}

const commoditySubmit = async() => {
  await updateCommodity(commodityEditData.value).then(res => {
    if (res.code === 0) {
      ElMessage.success('编辑成功')
    } else {
      ElMessage.error('编辑失败')
    }
    isOpenCommodityEdit.value = false
  })
}

const commodityDelete = async(val) => {
  ElMessageBox.confirm(
    '将永久删除该信息。是否继续？',
    '删除',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(async() => {
      await deleteCommodity(val).then(res => {
        if (res.code === 0) {
          ElMessage.success('删除成功')
          getData()
        } else {
          ElMessage.error('删除失败')
        }
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '删除已取消',
      })
    })
}

// 新增
const commodityAddData = ref({
  name: '',
  genre: '',
  supplierId: '',
  unitPrice: 0,
  unity: '',
  remark: '',
})
const isOpenCommodityAdd = ref(false)

const commodityAddSubmit = async() => {
  if (!commodityAddData.value.name || !commodityAddData.value.genre || !commodityAddData.value.supplierId || commodityAddData.value.unitPrice === 0) {
    ElMessage.error('数据不能为空')
    return
  }
  console.log(commodityAddData.value)
  await createCommodity(commodityAddData.value).then(res => {
    if (res.code === 0) {
      ElMessage.success('新增成功')
    } else {
      ElMessage.error('新增失败')
    }
    isOpenCommodityAdd.value = false
    getData()
  })
}

onMounted(() => {
  getData()
})
</script>