398 lines
10 KiB
Vue
398 lines
10 KiB
Vue
<template>
|
||
<div class="custom-page">
|
||
<avue-crud
|
||
ref="crudRef"
|
||
v-model="state.form"
|
||
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-del="rowDel"
|
||
>
|
||
<template #menu-left>
|
||
<el-button type="primary" icon="Plus" @click="onAdd">新增</el-button>
|
||
<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 #search>
|
||
<div class="custom-search">
|
||
<div class="search-fields">
|
||
<div class="search-item">
|
||
<span>网格员姓名：</span>
|
||
<el-input v-model="state.query.memberName" placeholder="网格员姓名" style="width: 200px; margin-right: 10px" />
|
||
</div>
|
||
<div class="search-item">
|
||
<AreaCascader
|
||
v-model:region-code="areaQuery.regionCode"
|
||
v-model:grid-id="areaQuery.gridId"
|
||
placeholder="选择行政区域与网格"
|
||
:show-separator="true"
|
||
:width="500"
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div class="search-buttons">
|
||
<el-button type="primary" @click="triggerSearch">搜索</el-button>
|
||
<el-button @click="resetSearch">重置</el-button>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
</avue-crud>
|
||
|
||
<el-dialog v-model="addDialogVisible" :title="isEdit ? '编辑网格员' : '新增网格员'" width="600px">
|
||
<el-form ref="addFormRef" :model="addForm" :rules="addFormRules" label-width="120px">
|
||
<el-form-item label="网格员姓名" prop="memberName">
|
||
<el-input v-model="addForm.memberName" style="width: 380px" />
|
||
</el-form-item>
|
||
<el-form-item label="" prop="gridId" label-width="0px">
|
||
<!-- 假设 AreaCascader 是行政区域-网格的级联选择组件 -->
|
||
<AreaCascader v-model:region-code="addForm.gridAreaCode" v-model:grid-id="addForm.gridId" split-rows label="" />
|
||
</el-form-item>
|
||
<el-form-item label="电话号码" prop="phone">
|
||
<el-input v-model="addForm.phone" style="width: 380px" />
|
||
</el-form-item>
|
||
<el-form-item label="备注" prop="note">
|
||
<el-input v-model="addForm.note" type="textarea" style="width: 380px" />
|
||
</el-form-item>
|
||
</el-form>
|
||
<template #footer>
|
||
<span class="dialog-footer">
|
||
<el-button @click="addDialogVisible = false">取消</el-button>
|
||
<el-button type="primary" @click="submitAddForm">确定</el-button>
|
||
</span>
|
||
</template>
|
||
</el-dialog>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { reactive, ref } from 'vue';
|
||
import { useApp } from '@/hooks';
|
||
import { CRUD_OPTIONS } from '@/config';
|
||
import { isEmpty, downloadFile } from '@/utils';
|
||
import { useUserStore } from '@/store/modules/user';
|
||
|
||
// 请根据你的项目路径替换为实际的接口路径
|
||
import { GetGridList, GetMemberList, AddMember, UpdateMember, DeleteMember, ExportMember } from '@/apis/resource/member';
|
||
|
||
const { VITE_APP_BASE_API } = import.meta.env;
|
||
const app = useApp();
|
||
const UserStore = useUserStore();
|
||
const crudRef = ref(null);
|
||
|
||
// 新增区域查询对象
|
||
const areaQuery = reactive({
|
||
regionCode: '',
|
||
gridId: '',
|
||
});
|
||
|
||
const state = reactive({
|
||
loading: false,
|
||
query: { current: 1, size: 10, memberName: '', gridAreaCode: '', gridId: '' },
|
||
form: {},
|
||
selection: [],
|
||
gridOptions: [],
|
||
options: {
|
||
...CRUD_OPTIONS,
|
||
addBtn: false,
|
||
searchBtn: false,
|
||
emptyBtn: false,
|
||
column: [
|
||
{
|
||
label: '网格员姓名',
|
||
prop: 'memberName',
|
||
},
|
||
{
|
||
label: '所属行政区域',
|
||
prop: 'gridAreaName',
|
||
width: 300,
|
||
},
|
||
{
|
||
label: '所属网格',
|
||
prop: 'gridId',
|
||
type: 'select',
|
||
width: 200,
|
||
dicData: [], // loadGridOptions 方法加载网格数据
|
||
props: {
|
||
label: 'gridName',
|
||
value: 'id',
|
||
},
|
||
},
|
||
{
|
||
label: '电话号码',
|
||
prop: 'phone',
|
||
},
|
||
{
|
||
label: '备注',
|
||
prop: 'note',
|
||
type: 'textarea',
|
||
span: 24,
|
||
rows: 3,
|
||
overHidden: true,
|
||
width: 200,
|
||
},
|
||
],
|
||
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: [],
|
||
currentRow: {},
|
||
});
|
||
// 新增弹窗相关
|
||
const addDialogVisible = ref(false);
|
||
const isEdit = ref(false);
|
||
const addFormRef = ref(null);
|
||
const addForm = reactive({
|
||
id: '',
|
||
memberName: '',
|
||
gridAreaCode: '',
|
||
gridId: '',
|
||
phone: '',
|
||
note: '',
|
||
});
|
||
const addFormRules = {
|
||
memberName: [{ required: true, message: '请输入网格员姓名', trigger: 'blur' }],
|
||
gridId: [{ required: true, message: '请选择所属网格', trigger: 'change' }],
|
||
phone: [
|
||
{ required: true, message: '请输入电话号码', trigger: 'blur' },
|
||
{ pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码' },
|
||
],
|
||
};
|
||
const loadData = () => {
|
||
state.loading = true;
|
||
GetMemberList(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 loadGridOptions = async () => {
|
||
try {
|
||
const res = await GetGridList(); // 获取足够多的网格数据
|
||
if (res.code === 200) {
|
||
state.options.column.find((item) => item.prop === 'gridId').dicData = res.data.records;
|
||
}
|
||
} catch (error) {
|
||
app.$message.error('获取网格列表失败');
|
||
}
|
||
};
|
||
loadGridOptions();
|
||
const currentChange = (current) => {
|
||
state.query.current = current;
|
||
loadData();
|
||
};
|
||
|
||
const sizeChange = (size) => {
|
||
state.query.size = size;
|
||
loadData();
|
||
};
|
||
|
||
// 触发搜索
|
||
const triggerSearch = () => {
|
||
state.query.gridAreaCode = areaQuery.regionCode;
|
||
state.query.gridId = areaQuery.gridId;
|
||
state.query.current = 1;
|
||
loadData();
|
||
};
|
||
|
||
// 重置搜索
|
||
const resetSearch = () => {
|
||
state.query.memberName = '';
|
||
state.query.gridAreaCode = '';
|
||
state.query.gridId = '';
|
||
areaQuery.regionCode = '';
|
||
areaQuery.gridId = '';
|
||
state.query.current = 1;
|
||
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 rowView = (row) => {
|
||
crudRef.value.rowView(row);
|
||
};
|
||
|
||
const rowEdit = (row) => {
|
||
isEdit.value = true;
|
||
Object.assign(addForm, row);
|
||
addDialogVisible.value = true;
|
||
};
|
||
// 打开新增弹窗
|
||
const onAdd = () => {
|
||
addDialogVisible.value = true;
|
||
// 清空表单
|
||
Object.keys(addForm).forEach((key) => {
|
||
addForm[key] = '';
|
||
});
|
||
};
|
||
|
||
// 提交表单
|
||
const submitForm = async () => {
|
||
if (!addFormRef.value) return;
|
||
try {
|
||
await addFormRef.value.validate();
|
||
if (isEdit.value) {
|
||
await UpdateMember(addForm);
|
||
app.$message.success('编辑网格员成功');
|
||
} else {
|
||
await AddMember(addForm);
|
||
app.$message.success('新增网格员成功');
|
||
}
|
||
addDialogVisible.value = false;
|
||
loadData();
|
||
} catch (error) {
|
||
app.$message.error(isEdit.value ? '编辑网格员失败' : '新增网格员失败');
|
||
}
|
||
};
|
||
|
||
const rowDel = (row, index, done) => {
|
||
if (isEmpty(row)) return;
|
||
app
|
||
.$confirm(`确认删除该网格员吗？`, '提示', {
|
||
confirmButtonText: '确定',
|
||
cancelButtonText: '取消',
|
||
type: 'warning',
|
||
})
|
||
.then(() => {
|
||
DeleteMember(row.id) // 👈 只传 id
|
||
.then((res) => {
|
||
if (res.code === 200) {
|
||
app.$message.success('删除成功！');
|
||
loadData();
|
||
done?.(); // 若使用 Table 的 inline 操作支持回调
|
||
}
|
||
})
|
||
.catch((err) => app.$message.error(err.msg || '删除失败'));
|
||
})
|
||
.catch(() => {});
|
||
};
|
||
|
||
const onExport = () => {
|
||
if (isEmpty(state.data)) {
|
||
app.$message.error('当前暂时没有可供导出的数据！');
|
||
return;
|
||
}
|
||
state.loading = true;
|
||
|
||
// 仅发送有效的查询条件
|
||
const { current, size, ...query } = state.query;
|
||
|
||
ExportMember(query)
|
||
.then((res) => {
|
||
downloadFile(res, '网格员明细表.xlsx', 'blob');
|
||
app.$message.success('导出成功！');
|
||
})
|
||
.catch(() => app.$message.error('导出失败！'))
|
||
.finally(() => {
|
||
state.loading = false;
|
||
});
|
||
};
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.custom-page {
|
||
padding: 20px;
|
||
.custom-search {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: flex-start;
|
||
padding: 16px;
|
||
border-radius: 8px;
|
||
// background-color: #f5f7fa;
|
||
|
||
.search-fields {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 16px;
|
||
width: 100%;
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.search-item {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
|
||
.el-input,
|
||
.el-select,
|
||
.el-cascader {
|
||
width: 200px;
|
||
}
|
||
span {
|
||
font-size: 14px;
|
||
color: #606266;
|
||
align-self: center;
|
||
}
|
||
}
|
||
|
||
.search-buttons {
|
||
display: flex;
|
||
align-self: center;
|
||
gap: 12px;
|
||
margin-left: 8px;
|
||
}
|
||
}
|
||
}
|
||
</style>
|