import { AddReq, compute,useCrud ,useExpose, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, dict, EditReq, uiContext, UserPageQuery, } from '@fast-crud/fast-crud';
import dayjs from 'dayjs';
import * as api from './api';
import { uploadFile } from './api';
import { auth } from '/@/utils/authFunction';
import {request} from '/@/utils/service';
import {getBaseURL} from '/@/utils/baseUrl';
import Cookies from 'js-cookie';
import { successMessage } from '/@/utils/message';
import { dictionary } from '/@/utils/dictionary';
import { APIResponseData } from '../columns/types';
import { computed, h,defineComponent, ref, onMounted, watch } from 'vue';
import { ElTable, ElTableColumn, ElLoading } from 'element-plus';
const BorrowRecords = defineComponent({
props: { form: Object },
setup(props) {
try {
const records = ref([]);
const loading = ref(false);
const filteredRecords = computed(() =>
(records.value || []).filter((item: any) => item?.record_type === 0)
);
const loadData = async () => {
if (!props.form?.id) return;
loading.value = true;
try {
const res = await api.getBorrowRecords(props.form.id);
records.value = res.data || [];
} finally {
loading.value = false;
}
};
watch(() => props.form?.id, loadData, { immediate: true });
return () => (
);
} catch (e) {
console.error("BorrowRecords setup error:", e);
return () =>
组件加载失败
;
}
}
});
const MaintenanceHistory = defineComponent({
props: { form: Object },
setup(props) {
try {
const records = ref([]);
const loading = ref(false);
const loadData = async () => {
if (!props.form?.id) return;
loading.value = true;
try {
const res = await api.getMaintenanceHistory(props.form.id);
records.value = res.data || [];
} finally {
loading.value = false;
}
};
watch(() => props.form?.id, loadData, { immediate: true });
return () => (
);
} catch (e) {
console.error("MaintenanceHistory setup error:", e);
return () => 组件加载失败
;
}
}
});
export const createCrudOptions = function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOptionsRet {
const pageRequest = async (query: UserPageQuery) => {
return await api.GetList(query);
};
const editRequest = async ({ form, row }: EditReq) => {
form.id = row.id;
return await api.UpdateObj(form);
};
const delRequest = async ({ row }: DelReq) => {
return await api.DelObj(row.id);
};
const addRequest = async ({ form }: AddReq) => {
return await api.AddObj(form);
};
const selectedIds = ref([]);
const onSelectionChange = (changed) => {
console.log("selection", changed);
selectedIds.value = changed.map((item) => item.id);
};
crudExpose.selectedIds = selectedIds;
return {
// selectedIds,
crudOptions: {
request: {
pageRequest,
addRequest,
editRequest,
delRequest,
},
table: {
rowKey: "id",
onSelectionChange
},
toolbar:{
show:true,
},
rowHandle: {
fixed: 'right',
width: 220,
view: {
show: true,
},
edit: {
show: true,
},
remove: {
show: true,
},
},
actionbar: {
buttons: {
add: {
show: auth('user:Create')
},
// batchimport:{
// text: "批量导入",
// title: "导入",
// // show: auth('user:batchimport'),
// },
// export: {
// text: "导出",
// title: "导出",
// show: auth('user:Export'),
// },
// downloadtemplate: {
// text: "下载模板",
// title: "下载模板",
// // show: auth('user:Export'),
// },
// batchdelete: {
// text: "批量删除",
// title: "批量删除",
// // show: auth('user:Export'),
// },
}
},
columns: {
$checked: {
title: "选择",
form: { show: false },
column: {
type: "selection",
align: "center",
width: "55px",
columnSetDisabled: true, //禁止在列设置中选择
selectable(row, index) {
// return row.id !== 1; //设置第一行不允许选择
return row.id;
}
}
},
_index: {
title: '序号',
form: { show: false },
column: {
align: 'center',
width: '70px',
columnSetDisabled: true,
formatter: (context) => {
let index = context.index ?? 1;
let pagination = crudExpose!.crudBinding.value.pagination;
return ((pagination!.currentPage ?? 1) - 1) * pagination!.pageSize + index + 1;
},
},
},
search:{
title: '关键字搜索',
search: { show: true,type: 'input', },
type: 'input',
form: {
component: { placeholder: '请输入' },
show:false},
column: {show:false}
},
code: {
title: '设备编号',
search: { show: true },
type: 'input',
column: { minWidth: 120 },
form: {
component: { placeholder: '请输入设备编号' },
rules: [{ required: true, message: '请输入设备编号' }],
},
viewForm:{
component: { placeholder: '' },
rules: [{ required: true, message: '' }],
},
},
category_name: {
title: '设备分类',
search: { show: true },
type: 'dict-select',
dict: dict({
url: '/api/system/device/category/?page=1&limit=100',
value: 'id',
label: 'name',
}),
column: { minWidth: 100 },
form: {
show:false,
component: { placeholder: '请选择设备分类' },
rules: [{ required: true, message: '请选择设备分类' }],
},
viewForm:{
component: { placeholder: '' },
rules: [{ required: true, message: '' }],
}
},
name: {
title: '设备名称',
search: { show: false },
type: 'input',
column: { minWidth: 120 },
form: {
component: { placeholder: '请输入设备名称' },
rules: [{ required: true, message: '请输入设备名称' }]
},
viewForm:{
component: { placeholder: '' },
rules: [{ required: true, message: '' }],
}
},
"inventory.borrowed_quantity":{
title: '设备状态',
type: 'text',
search: { show: false },
column: {
show: true,
minWidth: 100,
formatter: ({ row }) => {
const isBorrowed = row.borrowed_quantity > 0;
const label = isBorrowed ? row.total_quantity-row.borrowed_quantity==0?'在借':'在借' : row.total_quantity==0?'在借':'空闲';
const color = isBorrowed ? '#FFA500' : '#4CAF50';
return h(
'span',
{
style: {
display: 'inline-block',
padding: '2px 8px',
border: `1px solid ${color}`,
borderRadius: '4px',
backgroundColor: color,
color: 'white',
fontWeight: 'bold',
}
},
label
);
}
},
form: {
show:false,
component: { placeholder: '请选择设备状态' },
rules: [{ required: true, message: '请选择设备状态' }],
},
},
borrowed_quantity:{
title:"已借出",
type:'input',
search:{show:false},
column: { minWidth: 100 },
form: {
show:false,
component: { placeholder: '请输入已借出' },
rules: [{ required: true, message: '请输入已借出' }],
},
viewForm:{
component: { placeholder: '' },
rules: [{ required: true, message: '' }],
}
},
brand:{
title:'品牌',
type:"input",
column: { minWidth: 100 },
form: {
component: { placeholder: '请输入品牌' }
},
viewForm:{
component: { placeholder: '' },
rules: [{ required: true, message: '' }],
},
},
specification: {
title: '规格型号',
search: { show: false },
type: 'input',
column: { minWidth: 100 },
form: {
component: { placeholder: '请输入规格型号' }
},
viewForm:{
component: { placeholder: '' },
rules: [{ required: true, message: '' }],
},
},
serial_number:{
title:'序列号',
type:"input",
column: { minWidth: 100 },
form: {
component: { placeholder: '请输入序列号' }
},
viewForm:{
component: { placeholder: '' },
rules: [{ required: true, message: '' }],
},
},
total_quantity:{
title:'库存数量',
type:"input",
column: { minWidth: 100 },
addForm:{
show:false,
},
viewForm:{
show:false,
},
editForm:{show:false},
from:{
show:false,
component: { placeholder: '请输入库存数量' },
rules: [{ required: false, message: '请输入库存数量' }],
}
},
/* warehouse:{
title:'存放仓库',
search: { show: true },
type:"dict-select",
column: { minWidth: 150 },
dict: dict({
url: '/api/system/warehouse/',
value: 'id',
label: 'name'
}),
form: {
component: { placeholder: '请选择存放仓库' },
rules: [{ required: true, message: '请选择存放仓库' }],
}
}, */
status:{
title:'是否可见',
type: 'dict-switch',
column: {
show:false,
minWidth: 90,
component: {
name: 'fs-dict-switch',
activeText: '',
inactiveText: '',
style: '--el-switch-on-color: var(--el-color-primary); --el-switch-off-color: #dcdfe6',
onChange: compute((context) => {
return () => {
api.UpdateObjStatus(context.row).then((res:APIResponseData) => {
successMessage(res.msg as string);
});
};
}),
},
},
dict: dict({
data: dictionary('device_button_status_bool'),
}),
form: {
show:false,
rules: [{ required: true, message: '请选择是否可见' }],
},
viewForm:{
component: { placeholder: '' },
rules: [{ required: true, message: '' }],
}
},
status_label:{
title: '当前状态',
search: { show: false },
form: {
show:false,
}
},
department: {
title: '所属部门',
search: { show: false },
type: 'input',
column: { minWidth: 120 },
form: {
component: { placeholder: '请输入所属部门' }
},
viewForm:{
component: { placeholder: '' },
rules: [{ required: true, message: '' }],
}
},
purchase_date: {
title: '采购时间',
type: 'date',
search: { show: false },
column: {
minWidth: 120,
formatter: ({ value }) => (value ? dayjs(value).format('YYYY-MM-DD') : ''),
},
form: {
component: { placeholder: '请选择采购时间' },
rules: [{ required: false, message: '请选择采购时间' }],
},
viewForm:{
component: { placeholder: '' },
rules: [{ required: true, message: '' }],
},
valueResolve({ form, value }) {
form.purchase_date = value ? dayjs(value).format('YYYY-MM-DD') : null;
},
valueBuilder({ form, value }) {
form.purchase_date = value;
},
},
supplier: {
title: '供应商',
type: 'dict-select',
search: { show: true },
column: {
minWidth: 120,
},
dict: dict({
url: '/api/system/supplier/',
value: 'id',
label: 'name'
}),
form: {
component: { placeholder: '请输入供应商' },
},
viewForm:{
component: { placeholder: '' },
rules: [{ required: true, message: '' }],
}
},
price: {
title: '价格',
type: 'number',
search: { show: false },
column: { minWidth: 100 },
form: {
component: { placeholder: '请输入设备购入价格' },
rules: [{ required: false, message: '请输入设备购入价格' }],
},
viewForm:{
component: { placeholder: '' },
rules: [{ required: true, message: '' }],
}
},
warranty_expiration: {
title: '质保到期',
type: 'date',
search: { show: false },
column: { minWidth: 120 ,
formatter: ({ value }) => (value ? dayjs(value).format('YYYY-MM-DD') : ''),
},
viewForm: {
title: '质保到期',
component: {
render({ value }) {
// eslint-disable-next-line no-console
console.log("valuevaluevalue:::",value);
if (!value) return '';
const formatted = dayjs(value).format('YYYY-MM-DD');
const isExpired = dayjs(value).isBefore(dayjs(), 'day');
return h(
'span',
{
style: {
color: isExpired ? 'red' : 'inherit',
fontWeight: isExpired ? 'bold' : 'normal'
}
},
isExpired ? `${formatted}(已过期)` : formatted
);
},
showHtml: true,
}
},
form: {
component: { placeholder: '请选择质保到期' },
rules: [{ required: false, message: '请选择质保到期' }],
},
valueResolve({ form, value }) {
form.warranty_expiration = value ? dayjs(value).format('YYYY-MM-DD') : null;
},
valueBuilder({ form, value }) {
form.warranty_expiration = value;
},
},
tenant_id:{
title: '租户id',
type: 'input',
value: 1,
column: {
show:false,
minWidth: 120,
},
// dict: dict({
// url: '/api/system/tenant/list/',
// value: 'id',
// label: 'name'
// }),
form: {
value:1,
show:false,
component: { placeholder: '请填租户id' },
rules: [{ required: false, message: '请填租户id' }],
},
viewForm:{
component: { placeholder: '' },
rules: [{ required: true, message: '' }],
}
},
category:{
show: false,
title: '设备类别',
search: { show: false },
type: 'dict-select',
column: { show: false,minWidth: 120 },
dict: dict({
url: '/api/system/device/category/?page=1&limit=100',
value: 'id',
label: 'name'
}),
form: {
component: {
placeholder: '请输入设备类别',
filterable: true
},
rules: [{ required: true, message: '请输入设备类别' }],
},
viewForm:{
component: { placeholder: '' },
rules: [{ required: true, message: '' }],
}
},
quantity:{
show: false,
title: '库存数量',
search: { show: false },
type: 'input',
column: { show: false,minWidth: 120 },
viewForm:{
component:{placeholder:""}
},
form: {
component: { placeholder: '请输入库存数量' },
rules: [{ required: true, message: '请输入库存数量' }],
valueResolve({ form, value }) {
form.quantity = Number(value ?? 0);
},
valueBuilder({ form, value }) {
// form.tags =Array.from(String(value), Number);
form.quantity = form.total_quantity;
}
}
},
tags:{
show: false,
title: '设备标签',
search: { show: false },
type: 'dict-select',
column: { show: false,minWidth: 120 },
dict: dict({
url: '/api/system/device_tags/?page=1&limit=100',
value: 'id',
label: 'name'
}),
viewForm:{
component:{placeholder:""}
},
form: {
component: { placeholder: '请选择设备标签',
filterable: true
},
rules: [{ required: true, message: '请选择设备标签' }],
valueResolve({ form, value }) {
form.tags = Array.from(String(value), Number);
},
valueBuilder({ form, value }) {
if(value){
form.tags = Array.isArray(value)? value.length > 0 ? Number(value[0]) : '': Number(value);
}
},
}
},
image:{
title: '设备图片',
type: 'image-uploader',
column: {
minWidth: 120,
show:false,
},
form: {
show: auth('image:upload'),
component: {
uploader: {
type: 'form',
limit: 1,
action: '/api/system/device/upload-image/',
accept: ".jpg,.png",
uploadRequest: async ({ action, file, onProgress }) => {
const token = Cookies.get('token');
const data = new FormData();
data.append("image", file);
return await request({
url: action,
method: "post",
timeout: 60000,
headers: {
"Content-Type": "multipart/form-data",
"Authorization": token ? `JWT ${token}` : ''
},
data,
onUploadProgress: (p) => {
onProgress({ percent: Math.round((p.loaded / p.total) * 100) });
}
});
},
successHandle(ret) {
// eslint-disable-next-line no-console
// console.log("ret.data.image_url:::",ret.data.image_url);
return {
url: getBaseURL(ret.data.image_url),
key: ret.data.id,
...ret.data
};
},
}
},
},
valueBuilder({ row, key }) {
return row[key] ? [row[key]] : [];
},
valueResolve({ form, key }) {
// eslint-disable-next-line no-console
console.log("form[key]:::",form[key]);
form[key] = Array.isArray(form[key]) ? form[key][0] : form[key];
}
},
id: {
title: 'deviceid',
search: { show: false },
type: 'input',
column: { show:false,minWidth: 120 },
form: {
show:false,
component: { placeholder: '请输入维修' }
},
viewForm:{
show:true,
component: { placeholder: '' },
rules: [{ required: true, message: '' }],
}
},
},
viewForm: {
wrapper: {
buttons: {
ok:{
text:'提交',
show:false
}
}
},
row: { gutter: 20 },
group: {
groupType: "tabs",
groups: {
base: {
slots: {
label: (scope) => {
return (
基础信息
);
}
},
icon: "el-icon-goods",
columns: ["code","category_name", "name", "status","borrowed_quantity","brand","specification","serial_number","warehouse","is_visible","department","purchase_date","supplier","price","warranty_expiration","tenant_id","category","quantity","tags","image"]
},
borrow: {
show:true,
label: "借用记录",
icon: "el-icon-price-tag",
columns: ["id"],
slots: {
default: (scope) => {
const currentRow = crudExpose.getFormData();
console.log("currentRow::",currentRow);
return ;
}
}
},
maintenance: {
show:true,
label: "维修记录",
icon: "el-icon-warning-outline",
columns: ["id"],
slots: {
default: (scope) => {
const currentRowwx = crudExpose.getFormData();
console.log("currentRowwx::",currentRowwx);
return
}
}
},
maintain: {
label: "保养记录",
collapsed: true,
icon: "el-icon-warning-outline",
columns: []
},
datastatis: {
label: "数据统计",
collapsed: true,
icon: "el-icon-warning-outline",
columns: []
},
}
}
},
},
};
};