<script lang="ts" name="fBS_Customer" setup>
|
import { ref, reactive, onMounted } from "vue";
|
import type { FormRules } from "element-plus";
|
import { formatDate } from '/@/utils/formatTime';
|
import { useFBS_CustomerApi } from '/@/api/Customer/fBS_Customer';
|
import { useFBS_CusExtendApi } from '/@/api/Customer/fBS_CusExtend';
|
import { auth } from '/@/utils/authFunction';
|
import { ElMessageBox, ElMessage } from "element-plus";
|
import { downloadStreamFile } from "/@/utils/download";
|
import editDialog from '/@/views/Customer/fBS_CusExtend/component/fBS_Customer/component/editDialog.vue'
|
import printDialog from '/@/views/system/print/component/hiprint/preview.vue'
|
import ModifyRecord from '/@/components/table/modifyRecord.vue';
|
import ImportData from "/@/components/table/importData.vue";
|
|
const fBS_CusExtendApi = useFBS_CusExtendApi();
|
|
const fBS_CustomerApi = useFBS_CustomerApi();
|
const printDialogRef = ref();
|
const editDialogRef = ref();
|
const importDataRef = ref();
|
const state = reactive({
|
title: '',
|
loading: false,
|
showDialog: false,
|
ruleForm: {} as any,
|
stores: {},
|
dropdownData: {} as any,
|
exportLoading: false,
|
tableLoading: false,
|
showAdvanceQueryUI: false,
|
selectData: [] as any[],
|
tableQueryParams: {} as any,
|
tableParams: {
|
page: 1,
|
pageSize: 20,
|
total: 0,
|
field: 'createTime', // 默认的排序字段
|
order: 'descending', // 排序方向
|
descStr: 'descending', // 降序排序的关键字符
|
},
|
tableData: [],
|
listRow:{}
|
});
|
|
// 页面加载时
|
onMounted(async () => {
|
});
|
|
/**
|
* 根据id对数组元素进行操作：存在则替换，不存在则添加，指定删除则移除
|
* @param {Array} array - 要操作的原数组
|
* @param {Object} item - 要操作的元素，必须包含id属性
|
* @param {boolean} [deleteFlag=false] - 是否执行删除操作
|
* @returns {Array} 处理后的数组
|
*/
|
function operateByid(array, item, deleteFlag = false) {
|
// 检查元素是否包含id
|
// if (!item || !('id' in item)) {
|
// console.warn('元素必须包含id属性');
|
// return [...array];
|
// }
|
|
// 创建原数组的副本，避免直接修改原数组
|
const newArray = [...array];
|
// 查找数组中是否存在相同id的元素
|
const index = newArray.findIndex(i => i.id === item.id);
|
|
if (deleteFlag) {
|
// 如果需要删除且元素存在，则从数组中移除
|
if (index !== -1) {
|
newArray.splice(index, 1);
|
}
|
} else {
|
if (index !== -1) {
|
// 存在则替换
|
newArray[index] = item;
|
} else {
|
// 不存在则添加
|
newArray.push(item);
|
}
|
}
|
|
return newArray;
|
}
|
// 查询操作
|
const handleQuery = async (params: any = {}, deleteFlag:false) => {
|
state.tableLoading = true;
|
state.tableData = operateByid(state.tableData,params,deleteFlag)
|
console.log(params);
|
|
state.tableLoading = false;
|
};
|
|
// 列排序
|
const sortChange = async (column: any) => {
|
state.tableParams.field = column.prop;
|
state.tableParams.order = column.order;
|
await handleQuery();
|
};
|
|
// 删除
|
const delFBS_Customer = (row: any) => {
|
console.log(row,'rowrow');
|
|
ElMessageBox.confirm(`确定要删除吗?`, "提示", {
|
confirmButtonText: "确定",
|
cancelButtonText: "取消",
|
type: "warning",
|
}).then(async () => {
|
await fBS_CusExtendApi.delCustormerUser(row.id);
|
handleQuery(row,true);
|
ElMessage.success("删除成功");
|
}).catch(() => {});
|
};
|
|
// 批量删除
|
const batchDelFBS_Customer = () => {
|
ElMessageBox.confirm(`确定要删除${state.selectData.length}条记录吗?`, "提示", {
|
confirmButtonText: "确定",
|
cancelButtonText: "取消",
|
type: "warning",
|
}).then(async () => {
|
await fBS_CustomerApi.batchDelete(state.selectData.map(u => ({ id: u.id }) )).then(res => {
|
ElMessage.success(`成功批量删除${res.data.result}条记录`);
|
handleQuery();
|
});
|
}).catch(() => {});
|
};
|
|
// // 设置状态
|
// const changeFBS_CustomerStatus = async (row: any) => {
|
// await fBS_CusExtendApi.setStatus({ id: row.id, status: row.status }).then(() => ElMessage.success('状态设置成功'));
|
// };
|
|
// 导出数据
|
const exportFBS_CustomerCommand = async (command: string) => {
|
try {
|
state.exportLoading = true;
|
if (command === 'select') {
|
const params = Object.assign({}, state.tableQueryParams, state.tableParams, { selectKeyList: state.selectData.map(u => u.id) });
|
await fBS_CustomerApi.exportData(params).then(res => downloadStreamFile(res));
|
} else if (command === 'current') {
|
const params = Object.assign({}, state.tableQueryParams, state.tableParams);
|
await fBS_CustomerApi.exportData(params).then(res => downloadStreamFile(res));
|
} else if (command === 'all') {
|
const params = Object.assign({}, state.tableQueryParams, state.tableParams, { page: 1, pageSize: 99999999 });
|
await fBS_CustomerApi.exportData(params).then(res => downloadStreamFile(res));
|
}
|
} finally {
|
state.exportLoading = false;
|
}
|
}
|
|
handleQuery();
|
//父级传递来的函数，用于回调
|
const emit = defineEmits(["reloadTable"]);
|
const ruleFormRef = ref();
|
|
|
|
|
// 页面加载时
|
onMounted(async () => {
|
});
|
|
// 打开弹窗
|
const openDialog = async (row: any, title: string) => {
|
state.title = title;
|
let res = JSON.parse(JSON.stringify(row))
|
state.tableData = res.custormerUsers
|
state.listRow = row
|
// state.ruleForm = row.id ? await fBS_CustomerApi.detail(row.id).then(res => res.data.result) : JSON.parse(JSON.stringify(row));
|
state.showDialog = true;
|
};
|
|
// 关闭弹窗
|
const closeDialog = () => {
|
emit("reloadTable");
|
state.showDialog = false;
|
};
|
|
// 提交
|
const submit = async () => {
|
closeDialog();
|
};
|
|
//将属性或者函数暴露给父组件
|
defineExpose({ openDialog });
|
</script>
|
<template>
|
<div class="fBS_Customer-container">
|
<el-dialog v-model="state.showDialog" :width="1200" draggable @close="closeDialog" :close-on-click-modal="false">
|
<template #header>
|
<div style="color: #fff">
|
<span>{{ state.title }}</span>
|
</div>
|
</template>
|
<div class="flex-end">
|
<el-button @click="editDialogRef.openDialog(null, '新增用户',state.listRow)" v-auth="'fBS_Customer:add'" type="primary" v-reclick="1000">新建</el-button>
|
</div>
|
<el-card class="full-table" shadow="hover" style="margin-top: 5px">
|
<el-table :data="state.tableData" @selection-change="(val: any[]) => { state.selectData = val; }"
|
style="width: 100%" v-loading="state.tableLoading" tooltip-effect="light" row-key="id"
|
@sort-change="sortChange" border>
|
<el-table-column type="selection" width="40" align="center"
|
v-if="false" />
|
<!-- <el-table-column type="index" label="序号" width="55" align="center" /> -->
|
<el-table-column prop='name' label='姓名' sortable='custom' show-overflow-tooltip />
|
<el-table-column prop='isManager' label='角色' sortable='custom' show-overflow-tooltip >
|
<template #default="scope">
|
<el-switch
|
disabled="disabled"
|
v-model="scope.row.isManager"
|
:active-value='true'
|
:inactive-value='false'
|
active-text="管理员"
|
inactive-text="员工"
|
size="small"
|
inline-prompt
|
/>
|
</template>
|
</el-table-column>
|
<el-table-column prop='phoneNumber' label='手机号码' show-overflow-tooltip />
|
<el-table-column prop='isEn' label='是否启用' v-auth="'fBS_Customer:setStatus'" show-overflow-tooltip>
|
<template #default="scope">
|
<el-tag :type="scope.row.isEn?'primary':'error'">{{ scope.row.isEn?'是':'否' }}</el-tag>
|
</template>
|
</el-table-column>
|
<el-table-column prop='remark' label='备注' show-overflow-tooltip />
|
<el-table-column label="操作" width="70" align="center" fixed="right" show-overflow-tooltip
|
v-if="auth('fBS_Customer:update') || auth('fBS_Customer:delete')">
|
<template #default="scope">
|
<el-button icon="ele-Edit" size="small" text type="primary"
|
@click="editDialogRef.openDialog(scope.row, '编辑用户信息')" v-auth="'fBS_Customer:update'">
|
</el-button>
|
<el-button icon="ele-Delete" size="small" text type="primary"
|
@click="delFBS_Customer(scope.row)" v-auth="'fBS_Customer:delete'"> </el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
|
<ImportData ref="importDataRef" :import="fBS_CustomerApi.importData"
|
:download="fBS_CustomerApi.downloadTemplate" v-auth="'fBS_Customer:import'"
|
@refresh="handleQuery" />
|
<printDialog ref="printDialogRef" :title="'打印客户表'" @reloadTable="handleQuery" />
|
<editDialog ref="editDialogRef" @reloadTable="handleQuery" />
|
</el-card>
|
<template #footer>
|
<span class="dialog-footer">
|
<el-button @click="submit">取 消</el-button>
|
<el-button @click="submit" type="primary" v-reclick="1000">确 定</el-button>
|
</span>
|
</template>
|
</el-dialog>
|
</div>
|
</template>
|
<style lang="scss" scoped>
|
:deep(.el-select),
|
:deep(.el-input-number) {
|
width: 100%;
|
}
|
</style>
|
