494 lines
12 KiB
Vue
494 lines
12 KiB
Vue
<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"
|
||
>
|
||
<template #menu-left>
|
||
<el-button type="success" icon="download" @click="onExport">导出</el-button>
|
||
</template>
|
||
|
||
<template #menu="scope">
|
||
<custom-table-operate :actions="state.options.actions" :data="scope" />
|
||
</template>
|
||
|
||
<template #isIllegal="{ row }">
|
||
<el-tag v-if="row.isIllegal == '1'" type="danger">是</el-tag>
|
||
<el-tag v-if="row.isIllegal == '0'" type="success">否</el-tag>
|
||
</template>
|
||
|
||
<template #inspectionStatus="{ row }">
|
||
<el-tag v-if="row.inspectionStatus == '1'" type="success">已结束</el-tag>
|
||
<el-tag v-if="row.inspectionStatus == '0'">进行中</el-tag>
|
||
</template>
|
||
</avue-crud>
|
||
|
||
<el-dialog v-model="infoVisible" title="巡查任务" width="800" center>
|
||
<el-form ref="infoRef" :model="infoData" :rules="infoRules">
|
||
<el-descriptions :title="infoData.planName || ''" :column="2">
|
||
<el-descriptions-item label="任务编号">{{ infoData.id || '--' }}</el-descriptions-item>
|
||
<el-descriptions-item label="任务名称">{{ infoData.planName || '--' }}</el-descriptions-item>
|
||
<el-descriptions-item label="任务成员">{{ infoData.plantingArea || '--' }}</el-descriptions-item>
|
||
<el-descriptions-item label="巡查类型">{{ infoData.plantingMonths || '--' }}</el-descriptions-item>
|
||
<el-descriptions-item label="注意事项">{{ infoData.growthCycle || '--' }}</el-descriptions-item>
|
||
<el-descriptions-item label="巡查对象">{{ infoData.note || '--' }}</el-descriptions-item>
|
||
</el-descriptions>
|
||
<el-descriptions :title="'巡查信息登记'"> </el-descriptions>
|
||
<el-row :gutter="20">
|
||
<el-col :span="12">
|
||
<el-form-item label="是否违法:" prop="num">
|
||
<el-radio-group v-model="radio1">
|
||
<el-radio value="1" size="large">是</el-radio>
|
||
<el-radio value="2" size="large">否</el-radio>
|
||
</el-radio-group>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<el-form-item label="巡查情况" prop="gridName">
|
||
<el-input
|
||
v-model="infoData.mark"
|
||
:autosize="{ minRows: 2, maxRows: 4 }"
|
||
type="textarea"
|
||
laceholder="请输入巡查情况"
|
||
style="width: 240px"
|
||
></el-input>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
</el-form>
|
||
<template #footer>
|
||
<div class="dialog-footer">
|
||
<el-button @click="infoCancel">取消</el-button>
|
||
<el-button type="primary" @click="subMitInfo(infoRef)"> 确认 </el-button>
|
||
</div>
|
||
</template>
|
||
</el-dialog>
|
||
</div>
|
||
</template>
|
||
<script setup>
|
||
import { reactive, ref, h } from 'vue';
|
||
import { useApp } from '@/hooks';
|
||
import { CRUD_OPTIONS } from '@/config';
|
||
import { isEmpty, downloadFile } from '@/utils';
|
||
import { useUserStore } from '@/store/modules/user';
|
||
import { getlandInspection, savelandInspection, enrolllandInspection, exportlandInspection, getAddrCropByLand } from '@/apis/land';
|
||
import { progressProps } from 'element-plus';
|
||
|
||
const { VITE_APP_BASE_API } = import.meta.env;
|
||
const app = useApp();
|
||
const UserStore = useUserStore();
|
||
const crudRef = ref(null);
|
||
const handleLandChange = async (value, form, done) => {
|
||
if (!value || !value.item || !value.item.id) return; // 如果没有选择任何地块，则直接返回
|
||
let val = {};
|
||
getAddrCropByLand(value.item?.id || '')
|
||
.then((res) => {
|
||
if (res.code === 200) {
|
||
val = res.data || {};
|
||
}
|
||
})
|
||
.catch((err) => {
|
||
val = {};
|
||
})
|
||
.finally(() => {});
|
||
state.form.crop = val?.crop || value.item?.crop;
|
||
state.form.address = val?.county + val?.town + val?.village || value.item?.address;
|
||
};
|
||
|
||
const jobTypeOptions = reactive([
|
||
{ label: '施肥', value: '0' },
|
||
{ label: '杀虫', value: '1' },
|
||
{ label: '灌溉', value: '2' },
|
||
]);
|
||
const isDisabled = ref(false);
|
||
const state = reactive({
|
||
loading: false,
|
||
query: {
|
||
current: 1,
|
||
size: 10,
|
||
taskCode: '',
|
||
taskName: '',
|
||
taskMembers: '',
|
||
},
|
||
form: {},
|
||
selection: [],
|
||
options: {
|
||
...CRUD_OPTIONS,
|
||
addBtnText: '新增',
|
||
updateBtnText: '确定',
|
||
column: [
|
||
{
|
||
label: '任务编号',
|
||
prop: 'taskCode',
|
||
fixed: true,
|
||
search: true,
|
||
editDisplay: false,
|
||
rules: {
|
||
required: true,
|
||
message: '请输入',
|
||
trigger: 'blur',
|
||
},
|
||
},
|
||
{
|
||
label: '任务名称',
|
||
prop: 'taskName',
|
||
search: true,
|
||
width: '240px',
|
||
showOverflowTooltip: true,
|
||
editDisplay: false,
|
||
rules: {
|
||
required: true,
|
||
message: '请输入',
|
||
trigger: 'blur',
|
||
},
|
||
},
|
||
{
|
||
label: '任务成员',
|
||
search: true,
|
||
prop: 'taskMembers',
|
||
disabled: false,
|
||
editDisplay: false,
|
||
rules: {
|
||
required: true,
|
||
message: '请输入',
|
||
trigger: 'blur',
|
||
},
|
||
},
|
||
{
|
||
label: '巡查类型',
|
||
prop: 'inspectionType',
|
||
editDisplay: false,
|
||
rules: {
|
||
required: true,
|
||
message: '请输入',
|
||
trigger: 'blur',
|
||
},
|
||
},
|
||
{
|
||
label: '巡查对象',
|
||
prop: 'inspectionTarget',
|
||
editDisplay: false,
|
||
rules: {
|
||
required: true,
|
||
message: '请输入',
|
||
trigger: 'blur',
|
||
},
|
||
},
|
||
{
|
||
label: '注意事项',
|
||
prop: 'notes',
|
||
type: 'textarea',
|
||
minRows: 2, // 设置最小行数
|
||
maxRows: 5, // 设置最大行数
|
||
editDisplay: false,
|
||
rows: 1,
|
||
rules: {
|
||
required: true,
|
||
message: '请输入',
|
||
trigger: 'blur',
|
||
},
|
||
},
|
||
{
|
||
label: '是否违法',
|
||
prop: 'isIllegal',
|
||
editDisplay: false,
|
||
addDisplay: false,
|
||
rules: {
|
||
required: true,
|
||
message: '请输入',
|
||
trigger: 'blur',
|
||
},
|
||
},
|
||
{
|
||
label: '状态',
|
||
prop: 'inspectionStatus',
|
||
editDisplay: false,
|
||
addDisplay: false,
|
||
},
|
||
],
|
||
group: [
|
||
{
|
||
label: '任务信息>',
|
||
prop: 'caseInfo',
|
||
addDisplay: false,
|
||
column: [
|
||
{
|
||
label: '任务编号',
|
||
prop: 'taskCode',
|
||
render: ({ row }) => {
|
||
return h('span', {}, row.taskCode);
|
||
},
|
||
},
|
||
{
|
||
label: '任务名称',
|
||
prop: 'taskName',
|
||
render: ({ row }) => {
|
||
return h('span', {}, row.taskCode);
|
||
},
|
||
},
|
||
{
|
||
label: '任务成员',
|
||
prop: 'taskMembers',
|
||
render: ({ row }) => {
|
||
return h('span', {}, row.taskCode);
|
||
},
|
||
},
|
||
{
|
||
label: '巡查类型',
|
||
prop: 'inspectionType',
|
||
render: ({ row }) => {
|
||
return h('span', {}, row.taskCode);
|
||
},
|
||
},
|
||
{
|
||
label: '巡查对象',
|
||
prop: 'inspectionTarget',
|
||
render: ({ row }) => {
|
||
return h('span', {}, row.taskCode);
|
||
},
|
||
},
|
||
{
|
||
label: '注意事项',
|
||
prop: 'notes',
|
||
render: ({ row }) => {
|
||
return h('span', {}, row.taskCode);
|
||
},
|
||
},
|
||
],
|
||
},
|
||
{
|
||
label: '巡查信息登记>',
|
||
prop: 'caseInfo',
|
||
addDisplay: false,
|
||
column: [
|
||
{
|
||
label: '是否违法',
|
||
prop: 'isIllegal',
|
||
span: 24,
|
||
display: true,
|
||
type: 'radio',
|
||
editDisplay: true,
|
||
disabled: isDisabled,
|
||
dicData: [
|
||
{
|
||
label: '是',
|
||
value: '1',
|
||
},
|
||
{
|
||
label: '否',
|
||
value: '0',
|
||
},
|
||
],
|
||
},
|
||
{
|
||
label: '巡查情况',
|
||
prop: 'inspectionSituation',
|
||
type: 'textarea',
|
||
disabled: isDisabled,
|
||
span: 24,
|
||
minRows: 3, // 设置最小行数
|
||
maxRows: 5, // 设置最大行数
|
||
display: true,
|
||
editDisplay: true,
|
||
},
|
||
],
|
||
},
|
||
],
|
||
searchColumn: [],
|
||
actions: [
|
||
{
|
||
name: '登记结果',
|
||
icon: 'edit',
|
||
event: ({ row }) => doEnroll(row),
|
||
},
|
||
],
|
||
},
|
||
pageData: {
|
||
total: 0,
|
||
currentPage: 1,
|
||
pageSize: 10,
|
||
},
|
||
data: [],
|
||
currentRow: {},
|
||
});
|
||
const infoVisible = ref(false);
|
||
const infoRef = ref();
|
||
const infoData = reactive({
|
||
num: '',
|
||
name: '',
|
||
member: [],
|
||
type: '',
|
||
mark: '',
|
||
target: '',
|
||
});
|
||
|
||
const infoRules = reactive({
|
||
num: [{ required: true, message: '请选择是否违法', trigger: 'blur' }],
|
||
mark: [{ required: true, message: '请输入巡查情况', trigger: 'blur' }],
|
||
});
|
||
|
||
// 加载
|
||
const loadData = () => {
|
||
state.loading = true;
|
||
getlandInspection(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;
|
||
state.query.current = 1;
|
||
loadData();
|
||
};
|
||
|
||
// 刷新
|
||
const refreshChange = () => {
|
||
loadData();
|
||
app.$message.success('刷新成功');
|
||
};
|
||
|
||
// 选择
|
||
const selectionChange = (rows) => {
|
||
state.selection = rows;
|
||
};
|
||
|
||
// 新增
|
||
const rowSave = (row, done, loading) => {
|
||
// console.info('新增', row);
|
||
savelandInspection(row)
|
||
.then((res) => {
|
||
if (res.code === 200) {
|
||
app.$message.success('添加成功！');
|
||
done();
|
||
loadData();
|
||
}
|
||
})
|
||
.catch((err) => {
|
||
app.$message.error(err.msg);
|
||
})
|
||
.finally(() => {
|
||
loading();
|
||
});
|
||
};
|
||
|
||
// 编辑
|
||
const doEnroll = (row) => {
|
||
console.info('doEnroll', row);
|
||
// infoVisible.value = true;
|
||
isDisabled.value = row.inspectionStatus == '1';
|
||
crudRef.value.rowEdit(row);
|
||
};
|
||
|
||
const rowUpdate = (row, index, done, loading) => {
|
||
console.info('登记结果');
|
||
let parmer = {
|
||
id: row.id || '',
|
||
isIllegal: row.isIllegal || '0', //巡查结果是否违法（0 否，1 是）
|
||
inspectionSituation: row.inspectionSituation || '', //巡查情况
|
||
};
|
||
enrolllandInspection(parmer)
|
||
.then((res) => {
|
||
if (res.code === 200) {
|
||
app.$message.success('登记结果成功！');
|
||
done();
|
||
loadData();
|
||
}
|
||
})
|
||
.catch((err) => {
|
||
app.$message.error(err.msg);
|
||
})
|
||
.finally(() => {
|
||
loading();
|
||
});
|
||
};
|
||
|
||
// 导出
|
||
const onExport = () => {
|
||
if (isEmpty(state.data)) {
|
||
app.$message.error('当前暂时没有可供导出的数据！');
|
||
return;
|
||
}
|
||
state.loading = true;
|
||
const fileName = '土地巡查明细表';
|
||
exportlandInspection(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;
|
||
});
|
||
};
|
||
|
||
const subMitInfo = (formEl) => {
|
||
if (!formEl) return;
|
||
formEl.validate((valid) => {
|
||
if (valid) {
|
||
infoHide();
|
||
console.log('submit!');
|
||
} else {
|
||
console.log('error submit!');
|
||
}
|
||
});
|
||
};
|
||
|
||
const infoCancel = () => {
|
||
infoHide();
|
||
};
|
||
|
||
const infoHide = () => {
|
||
infoRef.value && infoRef.value.resetFields();
|
||
infoVisible.value = false;
|
||
};
|
||
</script>
|