This commit is contained in:
wangzenghua 2025-02-10 07:06:40 +00:00
parent 182b97b336
commit 97d90388a3
2 changed files with 401 additions and 1 deletions

View File

@ -1,3 +1,403 @@
<template> <template>
<div>产品质检管理</div> <div class="custom-page">
<avue-crud
ref="crudRef"
v-model="state.form"
v-model:search="state.query"
v-model:page="state.pageData"
:table-loading="state.loading"
:data="state.data"
:option="state.options"
@refresh-change="refreshChange"
@search-reset="searchChange"
@search-change="searchChange"
@selection-change="selectionChange"
@current-change="currentChange"
@size-change="sizeChange"
@row-save="rowSave"
@row-update="rowUpdate"
@row-del="rowDel"
>
<template #menu-left>
<el-button type="danger" icon="delete" @click="onDel(state.selection)">批量删除</el-button>
</template>
<template #qualityReportUrl="{ row }">
<el-button
v-if="row.qualityReportUrl"
type="primary"
text
@click="downloadFile(row.qualityReportUrl, `${row.productName}-质检报告.png`, 'image')"
>
下载
</el-button>
<span v-else>暂无</span>
</template>
<template #qualityReportUrl-form="{ column }">
<el-upload class="custom-form__uploader" action="#" :show-file-list="false" accept="image/*" :limit="1" :http-request="rowUploadPicture">
<img v-if="state.form.base64" :src="state.form.base64" class="custom-form__uploader__img" />
<el-icon v-else class="custom-form__uploader__icon"><Plus /></el-icon>
</el-upload>
</template>
<template #menu="scope">
<custom-table-operate :actions="state.options.actions" :data="scope" />
</template>
</avue-crud>
</div>
</template> </template>
<script setup>
import { reactive, ref } from 'vue';
import { useApp } from '@/hooks';
import { CRUD_OPTIONS } from '@/config';
import { isEmpty, imageToBase64, downloadFile } from '@/utils';
import { CommonUpload } from '@/apis';
import { GetEntityList, AddEntity, UpdateEntity, DeleteEntity } from '@/apis/quality';
const app = useApp();
const crudRef = ref(null);
const state = reactive({
loading: false,
query: {
current: 1,
size: 10,
},
form: {},
selection: [],
options: {
...CRUD_OPTIONS,
addBtn: false,
column: [
{
label: '溯源码',
prop: 'id',
search: true,
display: false,
width: 200,
},
{
label: '采收批次',
prop: 'harvestBatch',
width: 200,
disabled: true,
},
{
label: '产品名称',
prop: 'productName',
search: true,
width: 200,
disabled: true,
rules: {
required: true,
message: '请输入',
trigger: 'blur',
},
},
{
label: '质检结果',
prop: 'qualityResultType',
type: 'select',
dicData: [
{
label: '合格',
value: 0,
},
{
label: '不合格',
value: 1,
},
],
rules: {
required: true,
message: '请选择',
trigger: 'blur',
},
},
{
label: '质检类型',
prop: 'qualityType',
type: 'select',
dicData: [
{
label: '检测机构',
value: 0,
},
{
label: '自检',
value: 1,
},
],
rules: {
required: true,
message: '请选择',
trigger: 'blur',
},
},
{
label: '质检机构',
prop: 'department',
search: true,
width: 200,
overHidden: true,
rules: {
required: true,
message: '请输入',
trigger: 'blur',
},
},
{
label: '质检项目',
prop: 'qualityProject',
rules: {
required: true,
message: '请输入',
trigger: 'blur',
},
},
{
label: '质检人',
prop: 'qualityPerson',
rules: {
required: true,
message: '请输入',
trigger: 'blur',
},
},
{
label: '质检日期',
prop: 'datetime',
type: 'datetimerange',
searchRange: true,
search: true,
searchSpan: 8,
rangeSeparator: '至',
startPlaceholder: '开始日期',
endPlaceholder: '结束日期',
format: 'YYYY-MM-DD HH:mm:ss',
valueFormat: 'YYYY-MM-DD HH:mm:ss',
width: 200,
hide: true,
display: false,
},
{
label: '质检时间',
prop: 'qualityTime',
type: 'date',
format: 'YYYY-MM-DD',
valueFormat: 'YYYY-MM-DD',
width: 200,
rules: {
required: true,
message: '请输入',
trigger: 'blur',
},
},
{
label: '质检报告',
prop: 'qualityReportUrl',
type: 'upload',
span: 24,
// hide: true,
slot: true,
formslot: true,
},
{
label: '检测说明',
prop: 'qualityDescribe',
type: 'textarea',
span: 24,
rows: 4,
overHidden: true,
width: 200,
rules: {
required: true,
message: '请输入',
trigger: 'blur',
},
},
{
label: '创建时间',
prop: 'createTime',
width: 200,
display: false,
},
],
actions: [
{
name: '查看',
icon: 'view',
event: ({ row }) => rowView(row),
},
{
name: '编辑',
icon: 'edit',
event: ({ row }) => rowEdit(row),
},
{
type: 'danger',
name: '删除',
icon: 'delete',
event: ({ row }) => rowDel(row),
},
],
},
pageData: {
total: 0,
currentPage: 1,
pageSize: 10,
},
data: [],
});
//
const loadData = async () => {
state.loading = true;
GetEntityList(state.query)
.then((res) => {
if (res.code === 200) {
const { current, size, total, records } = res.data;
state.data = records;
state.pageData = {
currentPage: current || 1,
pageSize: size || 10,
total: total,
};
}
})
.catch((err) => {
app.$message.error(err.msg);
state.data = [];
})
.finally(() => {
state.loading = false;
});
};
loadData();
//
const currentChange = (current) => {
state.query.current = current;
loadData();
};
//
const sizeChange = (size) => {
state.query.size = size;
loadData();
};
//
const searchChange = (params, done) => {
if (done) done();
state.query = params;
if (params?.datetime) {
state.query.qualityStartTime = params.datetime[0];
state.query.qualityEndTime = params.datetime[1];
}
state.query.current = 1;
loadData();
};
//
const refreshChange = () => {
loadData();
app.$message.success('刷新成功');
};
//
const selectionChange = (rows) => {
state.selection = rows;
};
//
const rowView = (row) => {
row.base64 = row.qualityReportUrl;
crudRef.value.rowView(row);
};
//
const rowUploadPicture = async ({ file }) => {
if (isEmpty(file.name)) return;
const formData = new FormData();
formData.append('file', file);
const res = await CommonUpload(formData);
if (res.code === 200) {
state.form.qualityReportUrl = res.data.url;
const base64 = await imageToBase64(file);
state.form.base64 = base64;
}
};
//
const rowSave = (row, done, loading) => {
delete row.base64;
AddEntity(row)
.then((res) => {
if (res.code === 200) {
app.$message.success('添加成功!');
done();
loadData();
}
})
.catch((err) => {
app.$message.error(err.msg);
})
.finally(() => {
loading();
});
};
//
const rowEdit = (row) => {
row.base64 = row.qualityReportUrl;
crudRef.value.rowEdit(row);
};
const rowUpdate = (row, index, done, loading) => {
delete row.base64;
UpdateEntity(row)
.then((res) => {
if (res.code === 200) {
app.$message.success('更新成功!');
done();
loadData();
}
})
.catch((err) => {
app.$message.error(err.msg);
})
.finally(() => {
loading();
});
};
//
const onDel = (rows = []) => {
if (isEmpty(rows)) return;
const ids = rows.map((item) => item.id);
app
.$confirm(`删除后信息将不可查看,确认要删除吗?`, '确定删除', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
})
.then(() => {
DeleteEntity({ ids: ids.join(',') })
.then((res) => {
if (res.code === 200) {
app.$message.success('删除成功!');
loadData();
}
})
.catch((err) => {
app.$message.error(err.msg);
});
})
.catch(() => {});
};
const rowDel = (row, index, done) => {
onDel([row]);
};
</script>