lc_finance/web/src/view/storehouse/warehouse/warehouse.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="searchWarehouse.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="isOpenWarehouseAdd = true"
          >新增仓库</el-button>
        </el-col>
      </el-row>
    </el-header>
    <el-main>
      <el-table
        :data="warehouseListData"
        height="550"
      >
        <el-table-column
          prop="name"
          label="库房名称"
        />
        <el-table-column
          prop="location"
          label="库房位置"
        />
        <el-table-column
          prop="head"
          label="负责人"
        />
        <el-table-column
          prop="remarks"
          label="备注"
        />
        <el-table-column
          label="是否启用"
        >
          <template #default="scope">
            <el-switch
              v-model="scope.row.isEffective"
              style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
              @change="changeIsEffective(scope.row)"
            />
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template #default="scope">
            <el-button
              type="primary"
              @click="openWarehouseEdit(scope.row)"
            >编辑</el-button>
            <el-button
              type="danger"
              @click="warehouseDelete(scope.row)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--      分页-->
      <div class="gva-pagination">
        <el-pagination
          :current-page="searchWarehouse.pageInfo.page"
          :page-size="searchWarehouse.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="isOpenWarehouseEdit"
        title="修改仓库信息"
        direction="rtl"
        size="30%"
      >
        <div>
          <el-form
            v-model="warehouseEditData"
            label-position="left"
            label-width="auto"
            style="max-width: 400px"
          >
            <el-form-item label="库房名称">
              <el-input v-model="warehouseEditData.name" />
            </el-form-item>
            <el-form-item label="库房位置">
              <el-input
                v-model="warehouseEditData.location"
              />
            </el-form-item>
            <el-form-item label="负责人">
              <el-input
                v-model="warehouseEditData.head"
              />
            </el-form-item>
            <el-form-item label="备注">
              <el-input v-model="warehouseEditData.remarks" />
            </el-form-item>
            <el-form-item>
              <el-button
                type="primary"
                @click="warehouseEditSubmit"
              >提交</el-button>
              <el-button @click="isOpenWarehouseEdit = false">关闭</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-drawer>
      <el-drawer
        v-model="isOpenWarehouseAdd"
        title="新增仓库信息"
        direction="rtl"
        size="30%"
      >
        <div>
          <el-form
            v-model="warehouseAddData"
            label-position="left"
            label-width="auto"
            style="max-width: 400px"
          >
            <el-form-item label="库房名称">
              <el-input v-model="warehouseAddData.name" />
            </el-form-item>
            <el-form-item label="库房位置">
              <el-input
                v-model="warehouseAddData.location"
              />
            </el-form-item>
            <el-form-item label="负责人">
              <el-input
                v-model="warehouseAddData.head"
              />
            </el-form-item>
            <el-form-item label="备注">
              <el-input v-model="warehouseAddData.remarks" />
            </el-form-item>
            <el-form-item>
              <el-button
                type="primary"
                @click="warehouseAddSubmit"
              >提交</el-button>
              <el-button @click="isOpenWarehouseAdd = false">关闭</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-drawer>
    </el-main>
  </el-container>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import {
  createWarehouse,
  deleteWarehouse,
  queryWarehouseList,
  switchWarehouse,
  updateWarehouse
} from '@/api/storehouse'
import { ElMessage, ElMessageBox } from 'element-plus'

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

const warehouseListData = ref([])
const total = ref(0)

const getData = async() => {
  // 假设有接口来获取数据
  await queryWarehouseList(searchWarehouse.value).then(res => {
    warehouseListData.value = res.data.list
    total.value = res.data.total
  })
}

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

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

const changeIsEffective = async(row) => {
  await switchWarehouse(row).then(res => {
    console.log(res)
  })
}

const isOpenWarehouseEdit = ref(false)
const warehouseEditData = ref()
const openWarehouseEdit = (val) => {
  isOpenWarehouseEdit.value = true
  warehouseEditData.value = val
}

const warehouseEditSubmit = async() => {
  if (warehouseEditData.value.name === '') {
    ElMessage.error('库房名称不能为空')
    return
  }
  await updateWarehouse(warehouseEditData.value).then(res => {
    if (res.code === 0) {
      ElMessage.success(res.msg)
    } else {
      ElMessage.error('编辑失败')
    }
    isOpenWarehouseEdit.value = false
    getData()
  })
}

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

const warehouseAddData = ref({
  name: '',
  location: '',
  head: '',
  remarks: '',
})

const isOpenWarehouseAdd = ref(false)
const warehouseAddSubmit = async() => {
  if (warehouseAddData.value.name === '') {
    ElMessage.error('库房名称不能为空')
    return
  }
  await createWarehouse(warehouseAddData.value).then(res => {
    if (res.code === 0) {
      ElMessage.success(res.msg)
    } else {
      ElMessage.error(res.msg)
    }
    isOpenWarehouseAdd.value = false
    getData()
  })
}

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