feat:产品质检
This commit is contained in:
parent
1eb1f27f58
commit
57aa58e7d4
7
main/src/components/index.js
Normal file
7
main/src/components/index.js
Normal file
@ -0,0 +1,7 @@
|
||||
import SvgIcon from './svg-icon';
|
||||
import CustomTableOperate from './custom-table-operate';
|
||||
import CustomImportExcel from './custom-import-excel';
|
||||
import CustomRichEditor from './custom-rich-editor';
|
||||
import CustomEchartBar from './custom-echart-bar';
|
||||
|
||||
export { SvgIcon, CustomTableOperate, CustomImportExcel, CustomRichEditor, CustomEchartBar };
|
||||
72
sub-government-affairs-service/src/apis/coding.js
Normal file
72
sub-government-affairs-service/src/apis/coding.js
Normal file
@ -0,0 +1,72 @@
|
||||
import request from '@/utils/axios';
|
||||
|
||||
/**
|
||||
* @Title: 列表
|
||||
*/
|
||||
export function GetEntityList(params = {}) {
|
||||
return request('/trace/code/farmMange/page', {
|
||||
method: 'GET',
|
||||
params,
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* @Title: 新增
|
||||
*/
|
||||
export function AddEntity(data = {}) {
|
||||
return request('/trace/code/farmMange/save', {
|
||||
method: 'POST',
|
||||
data,
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* @Title: 修改
|
||||
*/
|
||||
export function UpdateEntity(data = {}) {
|
||||
return request('/trace/code/farmMange/edit', {
|
||||
method: 'PUT',
|
||||
data,
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* @Title: 删除
|
||||
*/
|
||||
export function DeleteEntity(params = {}) {
|
||||
return request('/trace/code/farmMange/delete', {
|
||||
method: 'DELETE',
|
||||
params,
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* @Title: 导入
|
||||
*/
|
||||
export function ImportEntity(data = {}) {
|
||||
return request('/trace/code/farmMange/import', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'multipart/form-data' },
|
||||
data,
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* @Title: 导出
|
||||
*/
|
||||
export function ExportEntity(params = {}) {
|
||||
return request('/trace/code/farmMange/export', {
|
||||
method: 'GET',
|
||||
params,
|
||||
responseType: 'blob',
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* @Title: 详情
|
||||
*/
|
||||
export function GetEntity(params = {}) {
|
||||
return request(`/trace/code/farmMange/qualityCheck/${params?.id}`, {
|
||||
method: 'GET',
|
||||
});
|
||||
}
|
||||
27
sub-government-affairs-service/src/apis/index.js
Normal file
27
sub-government-affairs-service/src/apis/index.js
Normal file
@ -0,0 +1,27 @@
|
||||
import request from '@/utils/axios';
|
||||
import { isEmpty } from '@/utils';
|
||||
|
||||
/**
|
||||
* @Title: 获取字典
|
||||
*/
|
||||
export function CommonDicData(params = { pageNum: 1, pageSize: 20, dictType: null }) {
|
||||
if (isEmpty(params?.dictType)) return;
|
||||
return request(`/system/dict/data/list`, {
|
||||
method: 'GET',
|
||||
apisType: 'dicData',
|
||||
params,
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* @Title: 上传图片
|
||||
*/
|
||||
export function CommonUpload(data, params) {
|
||||
return request(`/upload`, {
|
||||
method: 'POST',
|
||||
apisType: 'upload',
|
||||
uploadType: 'multipart/form-data',
|
||||
data,
|
||||
params,
|
||||
});
|
||||
}
|
||||
41
sub-government-affairs-service/src/apis/quality.js
Normal file
41
sub-government-affairs-service/src/apis/quality.js
Normal file
@ -0,0 +1,41 @@
|
||||
import request from '@/utils/axios';
|
||||
|
||||
/**
|
||||
* @Title: 列表
|
||||
*/
|
||||
export function GetEntityList(params) {
|
||||
return request('/trace/code/qualityManage/page', {
|
||||
method: 'GET',
|
||||
params,
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* @Title: 新增
|
||||
*/
|
||||
export function AddEntity(data) {
|
||||
return request('/trace/code/qualityManage/save', {
|
||||
method: 'POST',
|
||||
data,
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* @Title: 修改
|
||||
*/
|
||||
export function UpdateEntity(data) {
|
||||
return request('/trace/code/qualityManage/edit', {
|
||||
method: 'PUT',
|
||||
data,
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* @Title: 删除
|
||||
*/
|
||||
export function DeleteEntity(params) {
|
||||
return request('/trace/code/qualityManage/delete', {
|
||||
method: 'DELETE',
|
||||
params,
|
||||
});
|
||||
}
|
||||
Binary file not shown.
@ -0,0 +1,586 @@
|
||||
<template>
|
||||
<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>
|
||||
<el-button type="success" icon="upload" @click="onUpload">导入</el-button>
|
||||
<el-button type="success" icon="download" @click="onExport">导出</el-button>
|
||||
</template>
|
||||
|
||||
<template #productUrl-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 #customInfo-form="{ column }">
|
||||
<custom-info :row="state.currentRow" />
|
||||
</template>
|
||||
|
||||
<template #menu="scope">
|
||||
<custom-table-operate :actions="state.options.actions" :data="scope" />
|
||||
</template>
|
||||
</avue-crud>
|
||||
|
||||
<custom-import-excel
|
||||
ref="importExcelRef"
|
||||
:template-url="getAssetsFile('template/采收赋码-导入模板.xlsx')"
|
||||
@on-download="onDownloadExcel"
|
||||
@on-confirm="onUploadExcel"
|
||||
/>
|
||||
|
||||
<custom-quality-add ref="qualityAddRef" :row="state.currentRow" />
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { reactive, ref } from 'vue';
|
||||
import { useApp } from '@/hooks';
|
||||
import { CRUD_OPTIONS } from '@/config';
|
||||
import { isEmpty, imageToBase64, getAssetsFile, downloadFile } from '@/utils';
|
||||
import { useUserStore } from '@/store/modules/user';
|
||||
import { CommonUpload } from '@/apis';
|
||||
import { compact } from 'lodash';
|
||||
import { GetEntityList, AddEntity, UpdateEntity, DeleteEntity, ImportEntity, ExportEntity } from '@/apis/coding';
|
||||
import CustomInfo from './info.vue';
|
||||
import CustomQualityAdd from '../quality/form.vue';
|
||||
|
||||
const { VITE_APP_SYSTEM_API } = import.meta.env;
|
||||
const app = useApp();
|
||||
const UserStore = useUserStore();
|
||||
const crudRef = ref(null);
|
||||
const importExcelRef = ref(null);
|
||||
const qualityAddRef = ref(null);
|
||||
const state = reactive({
|
||||
loading: false,
|
||||
query: {
|
||||
current: 1,
|
||||
size: 10,
|
||||
},
|
||||
form: {},
|
||||
selection: [],
|
||||
options: {
|
||||
...CRUD_OPTIONS,
|
||||
addBtnText: '添加信息',
|
||||
column: [
|
||||
{
|
||||
label: '溯源码',
|
||||
prop: 'id',
|
||||
search: true,
|
||||
display: false,
|
||||
width: 200,
|
||||
},
|
||||
{
|
||||
label: '采收批次',
|
||||
prop: 'harvestBatch',
|
||||
width: 200,
|
||||
display: false,
|
||||
},
|
||||
{
|
||||
label: '产品名称',
|
||||
prop: 'productName',
|
||||
search: true,
|
||||
width: 200,
|
||||
rules: {
|
||||
required: true,
|
||||
message: '请输入',
|
||||
trigger: 'blur',
|
||||
},
|
||||
},
|
||||
{
|
||||
label: '产品种类',
|
||||
prop: 'productType',
|
||||
type: 'select',
|
||||
search: true,
|
||||
props: {
|
||||
label: 'dictLabel',
|
||||
value: 'dictValue',
|
||||
},
|
||||
dicUrl: `${VITE_APP_SYSTEM_API}/system/dict/data/list?pageNum=1&pageSize=20&dictType=sys_product_type`,
|
||||
dicHeaders: {
|
||||
authorization: UserStore.token,
|
||||
},
|
||||
dicFormatter: (res) => res?.data?.records ?? [],
|
||||
rules: {
|
||||
required: true,
|
||||
message: '请选择',
|
||||
trigger: 'blur',
|
||||
},
|
||||
},
|
||||
{
|
||||
label: '数量',
|
||||
prop: 'number',
|
||||
type: 'number',
|
||||
rules: {
|
||||
required: true,
|
||||
message: '请输入',
|
||||
trigger: 'blur',
|
||||
},
|
||||
},
|
||||
{
|
||||
label: '单位',
|
||||
prop: 'unit',
|
||||
type: 'select',
|
||||
props: {
|
||||
label: 'dictLabel',
|
||||
value: 'dictValue',
|
||||
},
|
||||
dicUrl: `${VITE_APP_SYSTEM_API}/system/dict/data/list?pageNum=1&pageSize=20&dictType=sys_unit_type`,
|
||||
dicHeaders: {
|
||||
authorization: UserStore.token,
|
||||
},
|
||||
dicFormatter: (res) => res?.data?.records ?? [],
|
||||
rules: {
|
||||
required: true,
|
||||
message: '请选择',
|
||||
trigger: 'blur',
|
||||
},
|
||||
},
|
||||
{
|
||||
label: '保质期',
|
||||
prop: 'qualityGuaranteePeriod',
|
||||
type: 'number',
|
||||
rules: {
|
||||
required: true,
|
||||
message: '请输入',
|
||||
trigger: 'blur',
|
||||
},
|
||||
formatter: (row) => {
|
||||
return row.qualityGuaranteePeriod + '天';
|
||||
},
|
||||
},
|
||||
// {
|
||||
// label: '质检结果',
|
||||
// prop: 'qualityResult',
|
||||
// display: false,
|
||||
// },
|
||||
// {
|
||||
// label: '质检报告',
|
||||
// prop: 'qualityReportUrl',
|
||||
// display: false,
|
||||
// slot: true,
|
||||
// },
|
||||
{
|
||||
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: 'harvestTime',
|
||||
type: 'date',
|
||||
format: 'YYYY-MM-DD',
|
||||
valueFormat: 'YYYY-MM-DD',
|
||||
width: 200,
|
||||
rules: {
|
||||
required: true,
|
||||
message: '请输入',
|
||||
trigger: 'blur',
|
||||
},
|
||||
},
|
||||
{
|
||||
label: '省',
|
||||
prop: 'province',
|
||||
hide: true,
|
||||
display: false,
|
||||
},
|
||||
{
|
||||
label: '市',
|
||||
prop: 'city',
|
||||
hide: true,
|
||||
display: false,
|
||||
},
|
||||
{
|
||||
label: '县/区',
|
||||
prop: 'county',
|
||||
hide: true,
|
||||
display: false,
|
||||
},
|
||||
{
|
||||
label: '乡镇',
|
||||
prop: 'village',
|
||||
hide: true,
|
||||
display: false,
|
||||
},
|
||||
{
|
||||
label: '原产地',
|
||||
prop: 'originAddress',
|
||||
display: false,
|
||||
overHidden: true,
|
||||
width: 200,
|
||||
},
|
||||
{
|
||||
label: '原产地',
|
||||
prop: 'cities',
|
||||
type: 'cascader',
|
||||
// search: true,
|
||||
hide: true,
|
||||
props: {
|
||||
label: 'areaName',
|
||||
value: 'areaCode',
|
||||
children: 'areaChildVOS',
|
||||
},
|
||||
dicUrl: `${VITE_APP_SYSTEM_API}/system/area/region?areaCode=530000`,
|
||||
dicHeaders: {
|
||||
authorization: UserStore.token,
|
||||
},
|
||||
dicFormatter: (res) => res.data ?? [],
|
||||
// change: (o) => setCityChange(o),
|
||||
rules: {
|
||||
required: true,
|
||||
message: '请选择',
|
||||
trigger: 'blur',
|
||||
},
|
||||
},
|
||||
{
|
||||
label: '原产地详细地址',
|
||||
prop: 'originAddressDetail',
|
||||
hide: true,
|
||||
span: 24,
|
||||
},
|
||||
// {
|
||||
// label: '经营主体',
|
||||
// prop: 'businessName',
|
||||
// search: true,
|
||||
// rules: {
|
||||
// required: true,
|
||||
// message: '请输入',
|
||||
// trigger: 'blur',
|
||||
// },
|
||||
// },
|
||||
{
|
||||
label: '产品图片',
|
||||
prop: 'productUrl',
|
||||
type: 'upload',
|
||||
span: 24,
|
||||
hide: true,
|
||||
formslot: true,
|
||||
rules: {
|
||||
required: true,
|
||||
message: '请输入',
|
||||
trigger: 'blur',
|
||||
},
|
||||
},
|
||||
{
|
||||
label: '农事记录',
|
||||
prop: 'farmRecord',
|
||||
type: 'textarea',
|
||||
span: 24,
|
||||
rows: 4,
|
||||
overHidden: true,
|
||||
width: 200,
|
||||
rules: {
|
||||
required: true,
|
||||
message: '请输入',
|
||||
trigger: 'blur',
|
||||
},
|
||||
},
|
||||
{
|
||||
label: '创建时间',
|
||||
prop: 'createTime',
|
||||
width: 200,
|
||||
display: false,
|
||||
},
|
||||
{
|
||||
label: '',
|
||||
labelWidth: 0,
|
||||
prop: 'customInfo',
|
||||
addDisplay: false,
|
||||
editDisplay: false,
|
||||
viewDisplay: true,
|
||||
span: 24,
|
||||
},
|
||||
],
|
||||
actions: [
|
||||
{
|
||||
name: '查看',
|
||||
icon: 'view',
|
||||
event: ({ row }) => rowView(row),
|
||||
},
|
||||
{
|
||||
name: '编辑',
|
||||
icon: 'edit',
|
||||
event: ({ row }) => rowEdit(row),
|
||||
},
|
||||
{
|
||||
type: 'danger',
|
||||
name: '删除',
|
||||
icon: 'delete',
|
||||
event: ({ row }) => rowDel(row),
|
||||
},
|
||||
{
|
||||
name: '新增质检',
|
||||
icon: 'plus',
|
||||
event: ({ row }) => rowAdd(row),
|
||||
},
|
||||
],
|
||||
},
|
||||
pageData: {
|
||||
total: 0,
|
||||
currentPage: 1,
|
||||
pageSize: 10,
|
||||
},
|
||||
data: [],
|
||||
currentRow: {},
|
||||
});
|
||||
|
||||
// 加载
|
||||
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.harvestStartTime = params.datetime[0];
|
||||
state.query.harvestEndTime = 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.productUrl;
|
||||
state.currentRow = row;
|
||||
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.productUrl = res.data.url;
|
||||
const base64 = await imageToBase64(file);
|
||||
state.form.base64 = base64;
|
||||
}
|
||||
};
|
||||
|
||||
const setCity = (row) => {
|
||||
if (!isEmpty(row.cities)) {
|
||||
row.province = row?.cities[0] ?? null;
|
||||
row.city = row?.cities[1] ?? null;
|
||||
row.county = row?.cities[2] ?? null;
|
||||
row.village = row?.cities[3] ?? null;
|
||||
}
|
||||
};
|
||||
|
||||
// const setCityChange = ({ value, dic }) => {
|
||||
// debugger;
|
||||
// const labels = [];
|
||||
// let currentOptions = dic;
|
||||
// value.forEach((val) => {
|
||||
// const option = dic.find((item) => item.areaCode === val);
|
||||
// if (option) {
|
||||
// labels.push(option.label);
|
||||
// currentOptions = option.children || [];
|
||||
// }
|
||||
// });
|
||||
// state.form.originAddress = labels.join(' / ');
|
||||
// };
|
||||
|
||||
// 新增
|
||||
const rowSave = (row, done, loading) => {
|
||||
delete row.base64;
|
||||
setCity(row);
|
||||
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.productUrl;
|
||||
row.cities = compact([row.province, row.city, row.county ?? '', row.village ?? '']);
|
||||
crudRef.value.rowEdit(row);
|
||||
};
|
||||
const rowUpdate = (row, index, done, loading) => {
|
||||
delete row.base64;
|
||||
setCity(row);
|
||||
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]);
|
||||
};
|
||||
|
||||
// 质检
|
||||
const rowAdd = (row) => {
|
||||
state.currentRow = row;
|
||||
qualityAddRef?.value && qualityAddRef.value.show();
|
||||
};
|
||||
|
||||
// 导入
|
||||
const onUpload = () => {
|
||||
importExcelRef?.value && importExcelRef.value.show();
|
||||
};
|
||||
|
||||
const onUploadExcel = (formData) => {
|
||||
ImportEntity(formData)
|
||||
.then((res) => {
|
||||
if (res.status === 200) {
|
||||
app.$message.success('导入成功！');
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
app.$message.error('导入失败！');
|
||||
importExcelRef.value.clear();
|
||||
})
|
||||
.finally(() => {
|
||||
importExcelRef.value.hide();
|
||||
});
|
||||
};
|
||||
|
||||
const onDownloadExcel = (url) => {
|
||||
downloadFile(url, `采收赋码-导入模板.xlsx`, 'blob');
|
||||
};
|
||||
|
||||
// 导出
|
||||
const onExport = () => {
|
||||
if (isEmpty(state.data)) {
|
||||
app.$message.error('当前暂时没有可供导出的数据！');
|
||||
return;
|
||||
}
|
||||
state.loading = true;
|
||||
const fileName = '采收与赋码明细表';
|
||||
ExportEntity(state.query)
|
||||
.then((res) => {
|
||||
if (res.status === 200) {
|
||||
downloadFile(res.data, `${fileName}.xlsx`, 'blob');
|
||||
app.$message.success('导出成功！');
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
app.$message.error('导出失败！');
|
||||
})
|
||||
.finally(() => {
|
||||
state.loading = false;
|
||||
});
|
||||
};
|
||||
</script>
|
||||
@ -0,0 +1,175 @@
|
||||
<template>
|
||||
<div class="custom-info">
|
||||
<avue-crud ref="crudRef" :table-loading="state.loading" :data="state.list" :option="state.options">
|
||||
<template #header>
|
||||
<h5 class="custom-form__title">质检记录</h5>
|
||||
</template>
|
||||
<template #qualityReportUrl="{ row: item }">
|
||||
<el-button
|
||||
v-if="item.qualityReportUrl"
|
||||
type="primary"
|
||||
text
|
||||
@click="downloadFile(item.qualityReportUrl, `${item.productName}-质检报告.png`, 'image')"
|
||||
>
|
||||
下载
|
||||
</el-button>
|
||||
<span v-else>暂无</span>
|
||||
</template>
|
||||
</avue-crud>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { reactive, ref, watch } from 'vue';
|
||||
import { useApp } from '@/hooks';
|
||||
import { CRUD_OPTIONS } from '@/config';
|
||||
import { downloadFile } from '@/utils';
|
||||
import { GetEntity } from '@/apis/coding';
|
||||
|
||||
const props = defineProps({
|
||||
row: {
|
||||
type: Object,
|
||||
default: () => {},
|
||||
},
|
||||
});
|
||||
|
||||
const app = useApp();
|
||||
const crudRef = ref(null);
|
||||
const state = reactive({
|
||||
loading: false,
|
||||
// query: {
|
||||
// current: 1,
|
||||
// size: 10,
|
||||
// },
|
||||
options: {
|
||||
...CRUD_OPTIONS,
|
||||
index: false,
|
||||
addBtn: false,
|
||||
refreshBtn: false,
|
||||
selection: false,
|
||||
menu: false,
|
||||
column: [
|
||||
{
|
||||
label: '溯源码',
|
||||
prop: 'id',
|
||||
width: 200,
|
||||
fixed: true,
|
||||
},
|
||||
{
|
||||
label: '采收批次',
|
||||
prop: 'harvestBatch',
|
||||
width: 200,
|
||||
},
|
||||
{
|
||||
label: '产品名称',
|
||||
prop: 'productName',
|
||||
width: 200,
|
||||
},
|
||||
{
|
||||
label: '质检结果',
|
||||
prop: 'qualityResultType',
|
||||
type: 'select',
|
||||
dicData: [
|
||||
{
|
||||
label: '合格',
|
||||
value: 0,
|
||||
},
|
||||
{
|
||||
label: '不合格',
|
||||
value: 1,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: '质检类型',
|
||||
prop: 'qualityType',
|
||||
type: 'select',
|
||||
dicData: [
|
||||
{
|
||||
label: '检测机构',
|
||||
value: 0,
|
||||
},
|
||||
{
|
||||
label: '自检',
|
||||
value: 1,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: '质检机构',
|
||||
prop: 'department',
|
||||
width: 200,
|
||||
overHidden: true,
|
||||
},
|
||||
{
|
||||
label: '质检项目',
|
||||
prop: 'qualityProject',
|
||||
},
|
||||
{
|
||||
label: '质检报告',
|
||||
prop: 'qualityReportUrl',
|
||||
slot: true,
|
||||
},
|
||||
{
|
||||
label: '检测说明',
|
||||
prop: 'qualityDescribe',
|
||||
type: 'textarea',
|
||||
overHidden: true,
|
||||
resize: 'none',
|
||||
width: 200,
|
||||
},
|
||||
{
|
||||
label: '质检人',
|
||||
prop: 'qualityPerson',
|
||||
},
|
||||
{
|
||||
label: '质检时间',
|
||||
prop: 'qualityTime',
|
||||
width: 200,
|
||||
},
|
||||
],
|
||||
},
|
||||
// pageData: {
|
||||
// total: 0,
|
||||
// currentPage: 1,
|
||||
// pageSize: 10,
|
||||
// },
|
||||
data: {},
|
||||
list: [],
|
||||
});
|
||||
|
||||
// 加载
|
||||
const loadData = () => {
|
||||
state.loading = true;
|
||||
GetEntity({ id: props.row.id })
|
||||
.then((res) => {
|
||||
if (res.code === 200) {
|
||||
state.data = res.data;
|
||||
state.list = res.data?.productInfo ?? [];
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
app.$message.error(err.msg);
|
||||
})
|
||||
.finally(() => {
|
||||
state.loading = false;
|
||||
});
|
||||
};
|
||||
|
||||
watch(
|
||||
() => props.row,
|
||||
(val) => {
|
||||
val?.id && loadData();
|
||||
},
|
||||
{
|
||||
deep: true,
|
||||
immediate: true,
|
||||
}
|
||||
);
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.custom-info {
|
||||
:deep(.avue-crud__header) {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,235 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
v-model="state.visible"
|
||||
draggable
|
||||
title="新增质检项目"
|
||||
top="10px"
|
||||
:close-on-click-modal="false"
|
||||
:close-on-press-escape="false"
|
||||
@close="state.visible = false"
|
||||
>
|
||||
<avue-form ref="formRef" v-model="state.form" :option="state.options" @submit="onSubmit">
|
||||
<template #qualityReportUrl="{ 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>
|
||||
</avue-form>
|
||||
</el-dialog>
|
||||
</template>
|
||||
<script setup>
|
||||
import { reactive, ref, watch } from 'vue';
|
||||
import { isEmpty, imageToBase64 } from '@/utils';
|
||||
import { useApp } from '@/hooks';
|
||||
import { CommonUpload } from '@/apis';
|
||||
import { AddEntity } from '@/apis/quality';
|
||||
|
||||
const props = defineProps({
|
||||
row: {
|
||||
type: Object,
|
||||
default: () => {},
|
||||
},
|
||||
});
|
||||
|
||||
// const emit = defineEmits(['on-confirm']);
|
||||
const app = useApp();
|
||||
const formRef = ref(null);
|
||||
const state = reactive({
|
||||
visible: false,
|
||||
form: {},
|
||||
options: {
|
||||
gutter: 20,
|
||||
labelWidth: 150,
|
||||
column: [
|
||||
{
|
||||
label: '采收批次',
|
||||
prop: 'harvestBatch',
|
||||
width: 200,
|
||||
disabled: true,
|
||||
rules: {
|
||||
required: true,
|
||||
message: '请输入',
|
||||
trigger: 'blur',
|
||||
},
|
||||
},
|
||||
{
|
||||
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: 'qualityTime',
|
||||
type: 'date',
|
||||
format: 'YYYY-MM-DD',
|
||||
valueFormat: 'YYYY-MM-DD',
|
||||
width: 200,
|
||||
rules: {
|
||||
required: true,
|
||||
message: '请输入',
|
||||
trigger: 'blur',
|
||||
},
|
||||
},
|
||||
{
|
||||
label: '质检报告',
|
||||
prop: 'qualityReportUrl',
|
||||
type: 'upload',
|
||||
slot: true,
|
||||
span: 24,
|
||||
hide: true,
|
||||
rules: {
|
||||
required: true,
|
||||
message: '请选择',
|
||||
trigger: 'blur',
|
||||
},
|
||||
},
|
||||
{
|
||||
label: '检测说明',
|
||||
prop: 'qualityDescribe',
|
||||
type: 'textarea',
|
||||
span: 24,
|
||||
rows: 4,
|
||||
overHidden: true,
|
||||
width: 200,
|
||||
rules: {
|
||||
required: true,
|
||||
message: '请输入',
|
||||
trigger: 'blur',
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
});
|
||||
|
||||
watch(
|
||||
() => props.row,
|
||||
(val) => {
|
||||
if (!isEmpty(val)) {
|
||||
state.form.harvestBatch = val?.harvestBatch ?? null;
|
||||
state.form.productName = val?.productName ?? null;
|
||||
}
|
||||
},
|
||||
{
|
||||
deep: true,
|
||||
immediate: true,
|
||||
}
|
||||
);
|
||||
|
||||
// 上传图片
|
||||
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 onSubmit = (row, done) => {
|
||||
delete row.base64;
|
||||
AddEntity(row)
|
||||
.then((res) => {
|
||||
if (res.code === 200) {
|
||||
app.$message.success('添加成功！');
|
||||
state.visible = false;
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
app.$message.error(err.msg);
|
||||
})
|
||||
.finally(() => {
|
||||
done();
|
||||
});
|
||||
};
|
||||
|
||||
defineExpose({
|
||||
show: () => {
|
||||
state.form = {};
|
||||
state.visible = true;
|
||||
},
|
||||
hide: () => {
|
||||
state.visible = false;
|
||||
},
|
||||
});
|
||||
</script>
|
||||
@ -0,0 +1,403 @@
|
||||
<template>
|
||||
<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>
|
||||
<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>
|
||||
@ -0,0 +1,301 @@
|
||||
<template>
|
||||
<div class="custom-page">
|
||||
<avue-crud
|
||||
ref="crudRef"
|
||||
v-model="state.form"
|
||||
v-model:search="state.query"
|
||||
v-model:page="state.page"
|
||||
:table-loading="state.loading"
|
||||
:data="state.data"
|
||||
:option="state.options"
|
||||
@refresh-change="refreshChange"
|
||||
@search-reset="searchChange"
|
||||
@search-change="searchChange"
|
||||
@row-save="rowSave"
|
||||
@row-update="rowUpdate"
|
||||
@row-del="rowDel"
|
||||
>
|
||||
<template #menu-left>
|
||||
<el-button type="danger" icon="delete" @click="onDel">批量删除</el-button>
|
||||
</template>
|
||||
|
||||
<template #menu="scope">
|
||||
<custom-table-operate :actions="state.options.actions" :data="scope" />
|
||||
</template>
|
||||
</avue-crud>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { reactive, ref, computed } from 'vue';
|
||||
import { useApp } from '@/hooks';
|
||||
import { sleep } from '@/utils';
|
||||
import { CRUD_OPTIONS } from '@/config';
|
||||
|
||||
import Mock from 'mockjs';
|
||||
const res = Mock.mock({
|
||||
'data|20': [
|
||||
{
|
||||
id: '@increment(100000)',
|
||||
name: '@ctitle(5,10)',
|
||||
'area|100-1000': 100,
|
||||
'status|1-2': 1,
|
||||
location: '东经 98°53′至 99°15′，北纬 23°27′至 23°40′F',
|
||||
'type|1-2': 1,
|
||||
'p1|1-2': 1,
|
||||
'p2|100-1000': 100,
|
||||
tag: '龙津河周边',
|
||||
address: '耿马镇白塔社区',
|
||||
createTime: '@datetime("yyyy-MM-dd HH:mm:ss")',
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
const app = useApp();
|
||||
const crudRef = ref(null);
|
||||
const state = reactive({
|
||||
loading: false,
|
||||
query: {},
|
||||
form: {},
|
||||
selection: [],
|
||||
options: {
|
||||
...CRUD_OPTIONS,
|
||||
addBtnText: '添加档案',
|
||||
column: [
|
||||
{
|
||||
label: '基地代码',
|
||||
prop: 'id',
|
||||
fixed: true,
|
||||
display: false,
|
||||
},
|
||||
{
|
||||
label: '基地名称',
|
||||
prop: 'name',
|
||||
fixed: true,
|
||||
search: true,
|
||||
width: 200,
|
||||
rules: {
|
||||
required: true,
|
||||
message: '请输入',
|
||||
trigger: 'blur',
|
||||
},
|
||||
},
|
||||
{
|
||||
label: '地址',
|
||||
prop: 'address',
|
||||
search: true,
|
||||
// span: 24,
|
||||
// rows: 4,
|
||||
overHidden: true,
|
||||
width: 200,
|
||||
rules: {
|
||||
required: true,
|
||||
message: '请输入',
|
||||
trigger: 'blur',
|
||||
},
|
||||
},
|
||||
{
|
||||
label: '使用状态',
|
||||
prop: 'status',
|
||||
type: 'select',
|
||||
search: true,
|
||||
dicData: [
|
||||
{
|
||||
label: '使用中',
|
||||
value: 1,
|
||||
},
|
||||
{
|
||||
label: '闲置',
|
||||
value: 2,
|
||||
},
|
||||
],
|
||||
rules: {
|
||||
required: true,
|
||||
message: '请选择',
|
||||
trigger: 'blur',
|
||||
},
|
||||
},
|
||||
{
|
||||
label: '经纬度',
|
||||
prop: 'location',
|
||||
rules: {
|
||||
required: true,
|
||||
message: '请输入',
|
||||
trigger: 'blur',
|
||||
},
|
||||
},
|
||||
{
|
||||
label: '土壤类型',
|
||||
prop: 'type',
|
||||
type: 'select',
|
||||
dicData: [
|
||||
{
|
||||
label: '肥沃',
|
||||
value: 1,
|
||||
},
|
||||
{
|
||||
label: '贫瘠',
|
||||
value: 2,
|
||||
},
|
||||
],
|
||||
rules: {
|
||||
required: true,
|
||||
message: '请选择',
|
||||
trigger: 'blur',
|
||||
},
|
||||
},
|
||||
{
|
||||
label: '气候条件',
|
||||
prop: 'p1',
|
||||
type: 'select',
|
||||
dicData: [
|
||||
{
|
||||
label: '干燥少雨',
|
||||
value: 1,
|
||||
},
|
||||
{
|
||||
label: '湿润多雨',
|
||||
value: 2,
|
||||
},
|
||||
],
|
||||
rules: {
|
||||
required: true,
|
||||
message: '请选择',
|
||||
trigger: 'blur',
|
||||
},
|
||||
},
|
||||
{
|
||||
label: '面积(亩)',
|
||||
prop: 'area',
|
||||
type: 'number',
|
||||
// labelTip: '提示语',
|
||||
// labelTipPlacement: 'bottom',
|
||||
rules: {
|
||||
required: true,
|
||||
message: '请输入',
|
||||
trigger: 'blur',
|
||||
},
|
||||
formatter: (row) => {
|
||||
return row.area + '亩';
|
||||
},
|
||||
},
|
||||
{
|
||||
label: '海拔(米)',
|
||||
prop: 'p2',
|
||||
type: 'number',
|
||||
rules: {
|
||||
required: true,
|
||||
message: '请输入',
|
||||
trigger: 'blur',
|
||||
},
|
||||
formatter: (row) => {
|
||||
return row.area + 'm';
|
||||
},
|
||||
},
|
||||
{
|
||||
label: '创建日期',
|
||||
prop: 'createdTime',
|
||||
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,
|
||||
},
|
||||
],
|
||||
actions: [
|
||||
{
|
||||
name: '查看',
|
||||
icon: 'view',
|
||||
event: ({ row }) => rowView(row),
|
||||
},
|
||||
{
|
||||
name: '编辑',
|
||||
icon: 'edit',
|
||||
event: ({ row }) => rowEdit(row),
|
||||
},
|
||||
{
|
||||
type: 'danger',
|
||||
name: '删除',
|
||||
icon: 'delete',
|
||||
event: ({ row }) => rowDel(row),
|
||||
},
|
||||
],
|
||||
},
|
||||
page: {
|
||||
total: 0,
|
||||
currentPage: 1,
|
||||
pageSize: 10,
|
||||
},
|
||||
data: [],
|
||||
});
|
||||
|
||||
const loadData = async () => {
|
||||
state.loading = true;
|
||||
await sleep(500);
|
||||
state.data = res.data;
|
||||
state.page = {
|
||||
total: 20,
|
||||
currentPage: 1,
|
||||
pageSize: 10,
|
||||
};
|
||||
state.loading = false;
|
||||
};
|
||||
|
||||
loadData();
|
||||
|
||||
// 搜索
|
||||
const searchChange = (params, done) => {
|
||||
console.log('search==', params);
|
||||
if (done) done();
|
||||
state.query = params;
|
||||
state.page.currentPage = 1;
|
||||
loadData();
|
||||
};
|
||||
|
||||
// 刷新
|
||||
const refreshChange = () => {
|
||||
loadData();
|
||||
app.$message.success('刷新成功');
|
||||
};
|
||||
|
||||
// 查看
|
||||
const rowView = (row) => {
|
||||
crudRef.value.rowView(row);
|
||||
};
|
||||
|
||||
// 新增
|
||||
const rowSave = (row, done, loading) => {
|
||||
console.log('add=', row);
|
||||
};
|
||||
|
||||
// 编辑
|
||||
const rowEdit = (row) => {
|
||||
crudRef.value.rowEdit(row);
|
||||
};
|
||||
const rowUpdate = (row, index, done, loading) => {
|
||||
// loading.value = true;
|
||||
console.log('update=', row);
|
||||
};
|
||||
|
||||
// 删除
|
||||
const rowDel = (row, index, done) => {
|
||||
app
|
||||
.$confirm(`删除后信息将不可查看，确认要删除该条信息内容吗？`, '确定删除', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
})
|
||||
.then(() => {
|
||||
console.log('del=', row);
|
||||
})
|
||||
.catch(() => {});
|
||||
};
|
||||
|
||||
const onDel = () => {};
|
||||
</script>
|
||||
@ -0,0 +1,213 @@
|
||||
<template>
|
||||
<div class="custom-page">
|
||||
<avue-crud
|
||||
ref="crudRef"
|
||||
v-model="state.form"
|
||||
v-model:search="state.query"
|
||||
v-model:page="state.page"
|
||||
:table-loading="state.loading"
|
||||
:data="state.data"
|
||||
:option="state.options"
|
||||
@refresh-change="refreshChange"
|
||||
@search-reset="searchChange"
|
||||
@search-change="searchChange"
|
||||
@row-save="rowSave"
|
||||
@row-update="rowUpdate"
|
||||
@row-del="rowDel"
|
||||
>
|
||||
<template #menu-left>
|
||||
<el-button type="danger" icon="delete" @click="onDel">批量删除</el-button>
|
||||
</template>
|
||||
|
||||
<template #menu="scope">
|
||||
<custom-table-operate :actions="state.options.actions" :data="scope" />
|
||||
</template>
|
||||
</avue-crud>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { reactive, ref } from 'vue';
|
||||
import { useApp } from '@/hooks';
|
||||
import { sleep } from '@/utils';
|
||||
import { CRUD_OPTIONS } from '@/config';
|
||||
|
||||
import Mock from 'mockjs';
|
||||
const res = Mock.mock({
|
||||
'data|20': [
|
||||
{
|
||||
id: '@increment(100000)',
|
||||
name: '@ctitle(5,10)',
|
||||
shop: '@ctitle(10,30)',
|
||||
buyTime: '@datetime("yyyy-MM-dd HH:mm:ss")',
|
||||
avalibleTime: '@datetime("yyyy-MM-dd HH:mm:ss")',
|
||||
createdTime: '@datetime("yyyy-MM-dd HH:mm:ss")',
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
const app = useApp();
|
||||
const crudRef = ref(null);
|
||||
const state = reactive({
|
||||
loading: false,
|
||||
query: {},
|
||||
form: {},
|
||||
selection: [],
|
||||
options: {
|
||||
...CRUD_OPTIONS,
|
||||
addBtnText: '添加档案',
|
||||
column: [
|
||||
{
|
||||
label: '种子代码',
|
||||
prop: 'id',
|
||||
fixed: true,
|
||||
display: false,
|
||||
},
|
||||
{
|
||||
label: '种子名称',
|
||||
prop: 'name',
|
||||
fixed: true,
|
||||
search: true,
|
||||
rules: {
|
||||
required: true,
|
||||
message: '请输入',
|
||||
trigger: 'blur',
|
||||
},
|
||||
},
|
||||
{
|
||||
label: '供应商',
|
||||
prop: 'shop',
|
||||
search: true,
|
||||
with: 300,
|
||||
overHidden: true,
|
||||
rules: {
|
||||
required: true,
|
||||
message: '请输入',
|
||||
trigger: 'blur',
|
||||
},
|
||||
},
|
||||
{
|
||||
label: '采购日期',
|
||||
prop: 'buyTime',
|
||||
type: 'datetime',
|
||||
format: 'YYYY-MM-DD HH:mm:ss',
|
||||
valueFormat: 'YYYY-MM-DD HH:mm:ss',
|
||||
width: 200,
|
||||
rules: {
|
||||
required: true,
|
||||
message: '请输入',
|
||||
trigger: 'blur',
|
||||
},
|
||||
},
|
||||
{
|
||||
label: '有效日期',
|
||||
prop: 'avalibleTime',
|
||||
type: 'datetime',
|
||||
format: 'YYYY-MM-DD HH:mm:ss',
|
||||
valueFormat: 'YYYY-MM-DD HH:mm:ss',
|
||||
width: 200,
|
||||
rules: {
|
||||
required: true,
|
||||
message: '请输入',
|
||||
trigger: 'blur',
|
||||
},
|
||||
},
|
||||
{
|
||||
label: '创建日期',
|
||||
prop: 'createdTime',
|
||||
type: 'datetime',
|
||||
format: 'YYYY-MM-DD HH:mm:ss',
|
||||
valueFormat: 'YYYY-MM-DD HH:mm:ss',
|
||||
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),
|
||||
},
|
||||
],
|
||||
},
|
||||
page: {
|
||||
total: 0,
|
||||
currentPage: 1,
|
||||
pageSize: 10,
|
||||
},
|
||||
data: [],
|
||||
});
|
||||
|
||||
const loadData = async () => {
|
||||
state.loading = true;
|
||||
await sleep(500);
|
||||
state.data = res.data;
|
||||
state.page = {
|
||||
total: 20,
|
||||
currentPage: 1,
|
||||
pageSize: 10,
|
||||
};
|
||||
state.loading = false;
|
||||
};
|
||||
|
||||
loadData();
|
||||
|
||||
// 搜索
|
||||
const searchChange = (params, done) => {
|
||||
console.log('search==', params);
|
||||
if (done) done();
|
||||
state.query = params;
|
||||
state.page.currentPage = 1;
|
||||
loadData();
|
||||
};
|
||||
|
||||
// 刷新
|
||||
const refreshChange = () => {
|
||||
loadData();
|
||||
};
|
||||
|
||||
// 查看
|
||||
const rowView = (row) => {
|
||||
crudRef.value.rowView(row);
|
||||
};
|
||||
|
||||
// 新增
|
||||
const rowSave = (row, done, loading) => {
|
||||
console.log('add=', row);
|
||||
};
|
||||
|
||||
// 编辑
|
||||
const rowEdit = (row) => {
|
||||
crudRef.value.rowEdit(row);
|
||||
};
|
||||
const rowUpdate = (row, index, done, loading) => {
|
||||
// loading.value = true;
|
||||
console.log('update=', row);
|
||||
};
|
||||
|
||||
// 删除
|
||||
const rowDel = (row, index, done) => {
|
||||
app
|
||||
.$confirm(`删除后信息将不可查看，确认要删除该条信息内容吗？`, '确定删除', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
})
|
||||
.then(() => {
|
||||
console.log('del=', row);
|
||||
})
|
||||
.catch(() => {});
|
||||
};
|
||||
|
||||
const onDel = () => {};
|
||||
</script>
|
||||
Loading…
x
Reference in New Issue
Block a user