336 lines
10 KiB
Vue
336 lines
10 KiB
Vue
|
<template>
|
||
|
|
<div class="customer-page">
|
||
|
|
<div class="customer-toolbar boxshadow">
|
||
|
|
<div class="customer-search-group">
|
||
|
|
<el-form-item label="关键字:" label-width="70px">
|
||
|
|
<el-input style="min-width: 120px" v-model="keyword" placeholder="请输入关键字" />
|
||
|
|
</el-form-item>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="boxshadow">
|
||
|
|
<ElRow>
|
||
|
|
<div style="width: 12px"></div>
|
||
|
|
<ElCol :xs="24" :sm="12" :lg="6" class="el-col2">
|
||
|
|
<ElButton @click="showDialog('add')" v-if="hasAuth('item_list@add')" v-ripple
|
||
|
|
>新增</ElButton
|
||
|
|
>
|
||
|
|
</ElCol>
|
||
|
|
</ElRow>
|
||
|
|
<ArtTable
|
||
|
|
ref="tableRef"
|
||
|
|
row-key="id"
|
||
|
|
:loading="loading"
|
||
|
|
:data="tableData"
|
||
|
|
:currentPage="pagination.currentPage"
|
||
|
|
:pageSize="pagination.pageSize"
|
||
|
|
:total="pagination.total"
|
||
|
|
@size-change="handleSizeChange"
|
||
|
|
@current-change="handleCurrentChange"
|
||
|
|
>
|
||
|
|
<template #default>
|
||
|
|
<ElTableColumn label="ID" prop="id" width="80" />
|
||
|
|
<ElTableColumn label="公司" prop="company_name" />
|
||
|
|
<ElTableColumn label="名称" prop="item_name" />
|
||
|
|
<ElTableColumn label="物品管理员" prop="manage_user_name" />
|
||
|
|
<ElTableColumn label="备注" prop="remark" />
|
||
|
|
<!-- <ElTableColumn label="是否耗材" prop="is_consumable" width="180" >
|
||
|
|
<template #default="scope">
|
||
|
|
<ElTag :type="scope.row.is_consumable ? 'primary' : 'info'">
|
||
|
|
{{ scope.row.is_consumable ? '是' : '否' }}
|
||
|
|
</ElTag>
|
||
|
|
</template>
|
||
|
|
</ElTableColumn> -->
|
||
|
|
<ElTableColumn label="状态" prop="status">
|
||
|
|
<template #default="scope">
|
||
|
|
<ElTag :type="scope.row.status ? 'primary' : 'info'">
|
||
|
|
{{ scope.row.status ? '启用' : '禁用' }}
|
||
|
|
</ElTag>
|
||
|
|
</template>
|
||
|
|
</ElTableColumn>
|
||
|
|
<ElTableColumn label="创建时间" prop="created_at" />
|
||
|
|
<ElTableColumn fixed="right" label="操作">
|
||
|
|
<template #default="scope">
|
||
|
|
<ElRow>
|
||
|
|
<el-button
|
||
|
|
link
|
||
|
|
@click="showDialog('edit', scope.row)"
|
||
|
|
v-if="hasAuth('item_list@edit')"
|
||
|
|
>
|
||
|
|
编辑
|
||
|
|
</el-button>
|
||
|
|
<el-button
|
||
|
|
type="danger"
|
||
|
|
link
|
||
|
|
@click="deleteRole(scope.row)"
|
||
|
|
v-if="hasAuth('item_list@del')"
|
||
|
|
>
|
||
|
|
删除
|
||
|
|
</el-button>
|
||
|
|
</ElRow>
|
||
|
|
</template>
|
||
|
|
</ElTableColumn>
|
||
|
|
</template>
|
||
|
|
</ArtTable>
|
||
|
|
</div>
|
||
|
|
<ElDialog v-model="dialogVisible" :title="dialogType === 'add' ? '新增' : '编辑'" align-center>
|
||
|
|
<ElForm
|
||
|
|
ref="formRef"
|
||
|
|
:model="form"
|
||
|
|
:rules="rules"
|
||
|
|
style="padding: 5px 20px"
|
||
|
|
label-width="100px"
|
||
|
|
>
|
||
|
|
<ElFormItem label="公司" prop="company_id">
|
||
|
|
<ElSelect
|
||
|
|
v-model="form.company_id"
|
||
|
|
placeholder="请选择公司"
|
||
|
|
filterable
|
||
|
|
style="width: 100%"
|
||
|
|
>
|
||
|
|
<ElOption
|
||
|
|
v-for="item in companyList"
|
||
|
|
:key="item.id"
|
||
|
|
:label="item.name"
|
||
|
|
:value="item.id"
|
||
|
|
/>
|
||
|
|
</ElSelect>
|
||
|
|
</ElFormItem>
|
||
|
|
<ElFormItem label="名称" prop="item_name">
|
||
|
|
<ElInput v-model="form.item_name" placeholder="请输入名称" />
|
||
|
|
</ElFormItem>
|
||
|
|
<ElFormItem label="物品管理员" prop="manage_user_id">
|
||
|
|
<ElSelect
|
||
|
|
v-model="form.manage_user_id"
|
||
|
|
placeholder="请选择负责人"
|
||
|
|
filterable
|
||
|
|
style="width: 100%"
|
||
|
|
>
|
||
|
|
<ElOption
|
||
|
|
v-for="item in manageUserList"
|
||
|
|
:key="item.id"
|
||
|
|
:label="item.name"
|
||
|
|
:value="item.id"
|
||
|
|
/>
|
||
|
|
</ElSelect>
|
||
|
|
</ElFormItem>
|
||
|
|
<!-- <ElFormItem label="规格型号" prop="spec_model">
|
||
|
|
<ElInput v-model="form.spec_model" placeholder="请输入规格型号" />
|
||
|
|
</ElFormItem>
|
||
|
|
<ElFormItem label="计量单位" prop="unit">
|
||
|
|
<ElInput v-model="form.unit" placeholder="请输入计量单位" />
|
||
|
|
</ElFormItem> -->
|
||
|
|
<!-- <ElFormItem label="是否耗材" prop="is_consumable">
|
||
|
|
<el-radio-group v-model="form.is_consumable">
|
||
|
|
<el-radio :label="1">是</el-radio>
|
||
|
|
<el-radio :label="0">否</el-radio>
|
||
|
|
</el-radio-group>
|
||
|
|
</ElFormItem> -->
|
||
|
|
<ElFormItem label="备注" prop="remark">
|
||
|
|
<ElInput v-model="form.remark" placeholder="请输入备注" />
|
||
|
|
</ElFormItem>
|
||
|
|
<ElFormItem label="状态" prop="status">
|
||
|
|
<ElSwitch v-model="form.status" :active-value="1" :inactive-value="0" />
|
||
|
|
</ElFormItem>
|
||
|
|
</ElForm>
|
||
|
|
<template #footer>
|
||
|
|
<div class="dialog-footer">
|
||
|
|
<ElButton @click="dialogVisible = false">取消</ElButton>
|
||
|
|
<ElButton type="primary" @click="handleSubmit(formRef)">提交</ElButton>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
</ElDialog>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup lang="ts">
|
||
|
|
import { ElMessage, ElMessageBox } from 'element-plus'
|
||
|
|
import type { FormInstance, FormRules } from 'element-plus'
|
||
|
|
import { invitemService } from '@/api/admin/Itemrequisition'
|
||
|
|
import { manageService } from '@/api/adminApi'
|
||
|
|
import { UserService } from '@/api/usersApi'
|
||
|
|
import { useAuth } from '@/composables/useAuth'
|
||
|
|
const { hasAuth } = useAuth()
|
||
|
|
defineOptions({ name: 'ItemList' })
|
||
|
|
const keyword = ref<string>('')
|
||
|
|
const loading = ref(false)
|
||
|
|
const dialogVisible = ref(false)
|
||
|
|
const formRef = ref<FormInstance>()
|
||
|
|
const rules = reactive<FormRules>({
|
||
|
|
company_id: [{ required: true, message: '请选择公司', trigger: 'change' }],
|
||
|
|
item_name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
|
||
|
|
manage_user_id: [{ required: true, message: '请选择负责人', trigger: 'change' }]
|
||
|
|
})
|
||
|
|
|
||
|
|
const form = reactive({
|
||
|
|
company_id: '',
|
||
|
|
manage_user_id: '',
|
||
|
|
remark: '',
|
||
|
|
item_name: '',
|
||
|
|
status: 1,
|
||
|
|
id: ''
|
||
|
|
})
|
||
|
|
const pagination = reactive({
|
||
|
|
currentPage: 1,
|
||
|
|
pageSize: 10,
|
||
|
|
total: 0
|
||
|
|
})
|
||
|
|
const companyList = ref<any[]>([])
|
||
|
|
const getcompanyList = async () => {
|
||
|
|
const response = await UserService.getCompanyList()
|
||
|
|
const list = (response as any)?.data ?? (response as any)?.records ?? response
|
||
|
|
companyList.value = Array.isArray(list) ? list : []
|
||
|
|
}
|
||
|
|
const manageUserList = ref<any>()
|
||
|
|
// 获取用户列表
|
||
|
|
const getCompanyUserList = async () => {
|
||
|
|
const response = await manageService.presetusers()
|
||
|
|
manageUserList.value = response || []
|
||
|
|
}
|
||
|
|
// 表格数据
|
||
|
|
const tableData = ref<any[]>([])
|
||
|
|
|
||
|
|
// 表格实例引用
|
||
|
|
const tableRef = ref()
|
||
|
|
|
||
|
|
onMounted(() => {
|
||
|
|
getWorkList()
|
||
|
|
getcompanyList()
|
||
|
|
getCompanyUserList()
|
||
|
|
})
|
||
|
|
watch([keyword], () => {
|
||
|
|
pagination.currentPage = 1
|
||
|
|
getWorkList()
|
||
|
|
})
|
||
|
|
// 获取列表数据
|
||
|
|
const getWorkList = async () => {
|
||
|
|
loading.value = true
|
||
|
|
try {
|
||
|
|
const { currentPage, pageSize } = pagination
|
||
|
|
const params: any = {
|
||
|
|
current: currentPage,
|
||
|
|
size: pageSize
|
||
|
|
}
|
||
|
|
if (keyword.value) {
|
||
|
|
params.keyword = keyword.value
|
||
|
|
}
|
||
|
|
const { records, current, size, total } = await invitemService.getinvitemlist(params)
|
||
|
|
tableData.value = records.map((item: any, index: number) => ({
|
||
|
|
...item
|
||
|
|
}))
|
||
|
|
Object.assign(pagination, { currentPage: current, pageSize: size, total })
|
||
|
|
} catch (error) {
|
||
|
|
console.error('获取列表失败:', error)
|
||
|
|
} finally {
|
||
|
|
loading.value = false
|
||
|
|
}
|
||
|
|
}
|
||
|
|
// 处理表格分页变化
|
||
|
|
const handleSizeChange = (newPageSize: number) => {
|
||
|
|
pagination.pageSize = newPageSize
|
||
|
|
getWorkList()
|
||
|
|
}
|
||
|
|
const handleCurrentChange = (newCurrentPage: number) => {
|
||
|
|
pagination.currentPage = newCurrentPage
|
||
|
|
getWorkList()
|
||
|
|
}
|
||
|
|
|
||
|
|
const dialogType = ref('add')
|
||
|
|
|
||
|
|
const showDialog = (type: string, row?: any) => {
|
||
|
|
dialogVisible.value = true
|
||
|
|
dialogType.value = type
|
||
|
|
|
||
|
|
if (type === 'edit' && row) {
|
||
|
|
// 编辑模式，填充所有字段
|
||
|
|
Object.assign(form, {
|
||
|
|
company_id: row.company_id,
|
||
|
|
item_name: row.item_name,
|
||
|
|
manage_user_id: row.manage_user_id,
|
||
|
|
remark: row.remark,
|
||
|
|
status: row.status,
|
||
|
|
id: row.id
|
||
|
|
})
|
||
|
|
} else {
|
||
|
|
// 新增模式，重置所有字段
|
||
|
|
Object.assign(form, {
|
||
|
|
company_id: '',
|
||
|
|
item_name: '',
|
||
|
|
manage_user_id: '',
|
||
|
|
remark: '',
|
||
|
|
status: 1,
|
||
|
|
id: ''
|
||
|
|
})
|
||
|
|
}
|
||
|
|
}
|
||
|
|
const deleteRole = (row?: any) => {
|
||
|
|
ElMessageBox.confirm('确定删除吗？', '删除确认', {
|
||
|
|
confirmButtonText: '确定',
|
||
|
|
cancelButtonText: '取消',
|
||
|
|
type: 'error'
|
||
|
|
}).then(async () => {
|
||
|
|
const { message } = await invitemService.invitemdelete({
|
||
|
|
id: row.id
|
||
|
|
})
|
||
|
|
ElMessage.success(message)
|
||
|
|
getWorkList()
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
const handleSubmit = async (formEl: FormInstance | undefined) => {
|
||
|
|
if (!formEl) return
|
||
|
|
await formEl.validate(async (valid) => {
|
||
|
|
if (valid) {
|
||
|
|
if (dialogType.value === 'add') {
|
||
|
|
const { message } = await invitemService.invitemadd({
|
||
|
|
company_id: form.company_id,
|
||
|
|
item_name: form.item_name,
|
||
|
|
manage_user_id: form.manage_user_id,
|
||
|
|
remark: form.remark,
|
||
|
|
status: form.status
|
||
|
|
})
|
||
|
|
ElMessage.success(message)
|
||
|
|
} else {
|
||
|
|
const { message } = await invitemService.invitemupdate({
|
||
|
|
id: form.id,
|
||
|
|
company_id: form.company_id,
|
||
|
|
item_name: form.item_name,
|
||
|
|
manage_user_id: form.manage_user_id,
|
||
|
|
remark: form.remark,
|
||
|
|
status: form.status
|
||
|
|
})
|
||
|
|
ElMessage.success(message)
|
||
|
|
}
|
||
|
|
dialogVisible.value = false
|
||
|
|
getWorkList()
|
||
|
|
}
|
||
|
|
})
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
:deep(.el-table__empty-block) {
|
||
|
|
height: 100% !important;
|
||
|
|
min-height: 200px;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
}
|
||
|
|
.page-content {
|
||
|
|
.svg-icon {
|
||
|
|
width: 1.8em;
|
||
|
|
height: 1.8em;
|
||
|
|
overflow: hidden;
|
||
|
|
vertical-align: -8px;
|
||
|
|
fill: currentcolor;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.customer-page {
|
||
|
|
background: var(--art-main-bg-color);
|
||
|
|
min-height: 100vh;
|
||
|
|
}
|
||
|
|
.customer-search-group {
|
||
|
|
display: flex;
|
||
|
|
gap: 12px;
|
||
|
|
}
|
||
|
|
</style>
|